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小 程序 是 一 个 能 让 微 信 更 加 好 玩 、 更 具 互 动 性 的 新 技术 。 不 久 前 ， 我 所 在 的 一 个 微 信 群 ， 大 家 表达 了 选 出 一 个 “ 群 主管 理会 ”的 需求 。 一 位 老 同 学 花 了 一 点 时 间 用 小 程序 做 了 一 款 “投票 神 器 ”的 小 工 
































号 ， 几 百 位 老 同学 都 参与 了 投票 ， 并 盛赞 该 工具 的 方便 好 用 。 















































的 想象 力 和 H 


















































这 也 是 我 第 一 次 使 用 小 程序 的 体验 ， 印 象 非常 深刻 。 小 程序 开发 的 产品 不 用 安装 ， 打 开 即 用 ， 使 用 简单 ， 易 于 推广 。 当 然 ， 小 程序 开发 的 产品 不 仅仅 是 简单 的 投票 工具 ， 其 应 用 场景 也 许 只 受 限 于 人 们 
和 场 的 需求 。 


















































在 万 众 创新 、 万 众 创业 的 时 代 ， 随 着 众多 商家 依托 小 程序 获得 了 红利 ， 企 业 对 小 程序 的 需求 日 益 高 涨 。 小 程序 不 仅 是 大 学 毕业 生 以 及 职场 人 就 业 谋生 的 技能 ， 也 是 中 小 企业 低 成 本 开发 产品 、 快 速 进 行 
市 场 验证 的 首选 技术 方案 。 








本 书 的 作者 石 桥 码 农 ， 曾 是 我 的 学 生 ， 也 是 工作 上 的 小 伙伴 。 他 作为 一 名 程序 员 ， 在 艺术 方面 也 有 相当 的 追求 和 实践 ， 虽 自称 码 农 ， 其 实 是 把 写 程序 当成 一 门 艺术 对 待 。 他 对 程序 代码 的 要 求 一 向 一 丝 
不 苟 、 精 益 求 精 。 我 至 今 记 得 他 形容 糟糕 的 代码 为 “穿着 棉 只 洗澡 ”， 十 分 形象 生动 。 他 的 技术 文档 一 向 秩序 井然 ， 不 堆砌 词 藻 ， 不 故弄玄虚 ， 注 解 详尽 而 不 失 简 约 ， 语 言 朴素 而 又 富 含 感 当 力 ， 因 此 有 理 
由 相信 他 所 编写 的 这 本 书 一 定 能 对 初学 者 有 所 神 益 。 


























中 国 传媒 大 学 脑 科 学 与 智能 媒体 研究 院 院 长 
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为 什么 要 写 这 本 书 
2017 年 4 月 22 日 ， 我 在 知 平 发 起 了 一 场 “ 零 基础 周末 学 习 小 程序 开发 ”直播 ， 从 当晚 8 点 开始 ， 我 一 边 撰写 教程 笔记 ， 一 边 与 500 多 位 学 员 在 线 互动 。 教 学 从 注册 账号 开始 ， 接 着 是 下 载 微 信 开 发 者 工 











具 ， 然 后 创 


























建 第 一 个 quick start 项 目 ， 最 后 编写 后 端 代码 ， 并 在 微 信 上 运行 和 测试 所 开发 的 小 程序 。 从 那天 晚上 到 第 二 天 凌晨 4 点 ， 我 发 出 了 7 篇 教程 。 








在 这 场 直 播 中 ， 我 原本 以 为 大 家 会 提问 一 些 诸如 页 面 如 何 跳 转 、 数 据 如 何 缓存 等 技术 问题 ， 但 是 大 家 提 的 却 大 都 是 一 些 有 关 小 程序 的 边缘 问题 ， 诸 如 如 何 下 载 和 安装 小 程序 、 如 何 获得 小 程序 内 测 资 格 





























不 少 学 员 尚 不 知道 小 程序 已 于 2017 年 1 月 9 日 正式 上 线 ; 并 且 ， 个 人 也 能 注册 账号 ; 所 谓 的 200 个 小 程序 内 测 资格 已 经 成 为 过 去 式 了 ;而 且 小 程序 不 需要 下 载 安装 。 
































很 多 学 习 小 程序 开发 的 学 员 甚 至 毫 无 编程 基础 ， 他 们 对 如 何 开发 一 款 小 程序 一 无 所 知 。 由 此 我 意识 到 ， 小 程序 初学 者 最 迫切 需要 的 并 不 是 复杂 和 高 深 的 教程 ， 而 是 一 本 简单 而 全 面 地 介绍 小 程序 开发 的 

















小 程序 不 是 一 门 
技术 带 给 开发 者 的 痛苦 ， 如 机 型 繁多 、 适 配 困难 、 审 核 周期 长 (GOS 


略 书 。 全 面 与 快速 入 门 是 其 第 一 需求 ， 基 于 此 ， 笔 者 编写 了 本 书 。 














达尔 文 说 过 ， 





“自然 界 生 存 下 来 的 ， 既 不 是 























语言 ， 它 是 一 门 新 的 综合 应 用 技术 。 小 程序 无 须 下 载 ， 不 用 安装 ， 拿 来 即 用 ， 正 所 谓 “ 事 了 拂 衣 去 ， 不 留 身 与 名 ”。 凡 是 接触 过 原生 iOS、Android 应 用 开发 的 读者 ， 都 能 理解 传统 开发 





















































等 等 
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肢 最 强壮 的 ， 也 不 是 头脑 最 聪明 的 ， 而 是 有 能 力 适 应 变化 的 物种 。” 















































国内 App 的 运营 成 本 一 直 在 增长 ， 目 前 获取 一 个 新 用 户 的 成 本 甚至 高 达 30 元 人 民 币 。 在 这 种 环境 下 ， 微 信 的 小 程序 应 运 而 生 。 从 小 程序 的 更 新 历史 来 看 ， 微 信之 父 张 小 龙 打造 新 技术 生态 圈 的 决心 是 异 






































常 坚决 的 。 随 着 小 程序 技术 的 成 熟 ， 开 发 者 社区 的 形成 ， 在 第 一 批 小 程序 开发 者 赚 到 第 一 桶 金 时 ， 这 一 新 技术 的 火爆 才刚 刚 拉 开 帷幕 。 























































































































2017 年 3 月 27 日 ， 微 信 小 程序 开放 了 个 人 账号 申请 ， 从 此 以 后 ， 不 是 企业 也 能 开发 小 程序 。 

2017 年 3 月 28 日 ， 微 信 小 程序 开放 了 蓝牙 、 卡 券 、 获 知 访问 场景 、 共 享 微 信 通 讯 录 等 功能 ， 并 支持 JS ES6 新 语法 。 

2017 年 4 月 17 日 ， 微 信 小 程序 代码 包 的 大 小 限制 由 1MB 提 升 到 2MB， 开 放 了 第 三 方 平 台 开发 小 程序 的 功能 ， 开 放 了 数据 分 析 接 口 。 
2017 年 4 月 20 日 ， 微 信 小 程序 对 所 有 公众 号 都 开放 了 关联 小 程序 的 功能 。 

2017 年 4 月 25 日 ， 微 信 小 程序 开放 了 公众 号 推送 文章 可 插入 小 程序 的 功能 。 

2017 年 5 月 19 日 ， 微 信 小 程序 可 支持 蓝牙 。 

2017 年 6 月 21 日 ， 微 信 小 程序 开放 了 打开 另 一 个 小 程序 的 功能 。 

2017 年 ?月 11 日 ， 微 信 小 程序 添加 了 富 文本 支持 。 























随 着 微 信 小 程序 不 断 开放 新 接口 与 新 功能 ， 小 程序 的 开发 社区 正在 逐渐 形成 。 学 习 一 门 新 技术 最 好 的 契机 ， 正 是 其 方兴未艾 之 时 。 无 论 是 初 入 校园 的 大 一 新 生 ， 还 是 刚刚 走 上 工作 岗位 的 职场 新 人 ， 此 
时 学 习 小 程序 技术 ， 正 是 最 佳 良机 。 你 与 有 数 十 年 编程 经 验 的 老手 站 在 了 同一 起 跑 线 上 ， 因 为 小 程序 对 所 有 人 来 说 都 是 全 新 的 技术 。 今 天 的 菜鸟 ， 未 必 就 不 能 成 为 明日 高 手 。 



























































根据 我 在 小 程序 培训 中 的 观察 ， 初 学 者 最 大 的 痛 点 是 感觉 技术 太 杂 ， 要 学 的 东西 太 多 。 买 了 一 堆 书 堆 在 桌 上 ， 学 完 这 个 又 学 那个 ， 难 于 将 其 融会 贯通 。 行 程 未 远 ， 激 情 已 耗 大 半 。 目 前 市 面 上 还 没有 一 


本 书 从 前 端 到 
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全 面 介 绍 小 程序 的 开发 技术 ， 已 有 的 书籍 有 的 介绍 了 小 程序 组 件 而 未 介绍 JS 语言， 有 的 介绍 了 Js 语言 却 未 讲解 如 何 开发 服务 端 程序 ， 而 本 书 首次 全 面 介 绍 了 小 程序 所 需要 用 到 的 所 有 技 














术 ， 从 小 程序 组 件 到 WXSSs 样 式 ， 从 前 端 JS 语言 到 后 端 Go 语 言 ， 通 过 实战 案例 ， 由 浅 入 深 地 介绍 小 程序 开发 涉及 的 所 有 内 容 ， 帮 助 读者 快速 成 长 为 一 名 真正 的 微 信 全 栈 工 程 师 。 


读者 对 象 





:高校 香 业 生 ， 中 专 技校 毕业 生 。 


“ 工作 1 一 2 年 的 、 渴 望 获得 加 薪 技能 的 职场 新 人 。 


“ 渴望 以 软件 开发 为 谋生 手段 的 自由 “手艺 ”人 。 


“ 准备 报名 或 已 参加 小 程序 开发 培训 班 的 读者 。 
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BA, AFERKA 
人 后 悔 在 2007 年 第 一 款 iPhone 发 布 时 没有 开始 学 习 iOSs 开 发 ， 





情 就 是 找到 一 个 喜欢 的 人 ， 认 认真 真 地 谈 一 场 无 关 名 利 的 恋爱 。 但 大 学 里 不 只 有 恋爱 ， 在 新 学 期 伊始 就 开始 学 习 小 程序 开发 吧 ， 这 将 是 送 给 自己 最 好 的 礼物 。 许 多 
羡慕 那些 早期 的 iOS 开 发 者 获得 平台 的 初期 红利 。 现 在 小 程序 来 了 ， 企 业 市 场 对 小 程序 的 需求 越 来 越 旺 ， 学 好 这 门 实 用 的 技术 ， 毕 业 后 就 


年 后 的 




















ab: 
只 能 












































不 怕 找 不 到 工作 ; 如 果 向 往 自由 的 生活 ， 不 想 在 公司 打工 ， 还 可 以 自己 接 单 ， 做 SOHO 一 族 。 如 果 学 得 好 ， 那 么 在 校 期 间 就 可 以 接 单 ， 成 为 一 名 自食其力 的 编码 “手艺 人 ”。 
如 何 阅读 本 书 
本 书 主要 包括 四 篇 ， 内 容 分 布 如 下 。 





“ 第 一 篇 ， 即 第 1 章 学 前 准备 ， 讲 解 了 小 程序 开发 环境 的 准备 及 账号 的 注册 。 完 成 第 1 章 的 学 习 相当 于 取得 了 小 程序 技术 殿堂 的 入 场 券 。 


: 第 二 篇 ， 第 2 一 10 章 ， 本 篇 是 项 目 实战 部 分 ， 其 中 第 2~6 章 讲解 小 程序 前 端 案例 ， 使 用 了 后 台地 址 但 未 涉及 后 台 编 程 ; 第 7 一 10 章 在 已 有 案例 的 基础 上 添加 了 后 端 程序 的 支持 。 先 学 习 前 端 ， 再 学 习 后 
端 ， 每 次 专注 一 个 点 学 习 ， 更 易 理 解 和 掌握 。 


“ 第 三 篇 ， 第 11 ~14 章 ， 本 篇 详细 地 讲解 了 所 有 小 程序 组 件 的 使 用 方法 ， 所 附 示例 几乎 全 部 都 是 生产 可 用 的 ， 这 就 大 大 降低 了 初学 者 在 美工 上 的 学 习 门 槛 。 


系 


2. Go 语言 、 章节 


“ 第 四 篇 ， 第 15 一 17 章 ， 本 篇 是 综合 练习 部 分 ， 系 统 地 WXSS 样 式 语法 等 必 备 知识 与 技能 。 章节 又 都 有 独立 的 练习 代码 ， 可 


便于 读者 利用 课余 或 业余 的 碎片 时 间 提 高 编码 水 平 。 


这 3 章 既 可 作为 工具 手册 ， 以 备 开发 查询 之 需 ; 每 一 


学 习 指 引 : 


1. 读 者 从 第 1 章 开始 到 第 14 章 ， 逐 章 学 习 ， 并 运行 测试 所 有 的 实例 。 每 一 章 都 附 有 源码 ， 读 者 在 学 习 的 过 程 中 如 果 遇 到 问题 ， 可 以 下 载 作者 的 源码 对 照 学 习 。 


























2. 待 前 14 章 全 部 学 完 ， 进 入 第 15 ~ 17 章 的 综合 学 习 。 在 这 个 阶段 的 学 习 过 程 中 ， 不 妨 直接 
程 以 博客 的 形式 记录 下 来 ， 并 在 社区 发 表 ， 可 以 此 加 深 印 象 。 





新 学 的 知识 直接 深入 修改 前 











业已 完成 的 示例 ， 将 本 书 的 示例 变 成 自己 的 示例 。 如 果 有 时 间 ， 建 议 将 修改 过 
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小 组 学 习 
我 至 今 最 为 怀念 的 时 光 ， 便 是 大 学 里 和 两 位 好 友 在 机 房 里 通宵 学 编程 的 日 子 。 我 们 三 个 人 相互 著 策 又 相互 欣赏 ,经常 比较 谁 的 代码 写 得 更 优雅 ， 谁 的 代码 执行 效率 更 高 。 











我 希望 每 个 读者 都 能 找到 朋友 或 同学 组 成 一 个 学 习 小 组 ， 或 2 人 ， 或 3 人 ， 共 同学 习 ， 相 互 激励 ， 这 样 学 习 的 效率 和 动力 会 高 许多 。 和 孔子 日 “三 人 行 ， 必 有 我 师 ” ， 诚 不 我 欺 。 


勘误 


由 于 作者 水 平 有 限 ， 写 作 时 间 又 很 仓促 ， 书 中 难免 有 不 妥 之 处 ， 尽 请 读者 批评 指正 。 





如 果 读 者 在 阅读 过 程 中 发 现 了 问题 ， 或 者 有 什么 疑问 ， 欢 迎 与 作者 联系 。 作 者 的 邮箱 是 liyi@rixingyike.com。 


在 学 习 本 书 的 过 程 中 ， 也 欢迎 加 入 作者 的 小 程序 微 信 群 ， 关 注 微 信 公 众 号 “ 艺 述 思 维 ”， 回 复 “ 小 程序 ”就 能 加入。 未 来 作者 会 举办 读者 线 下 交流 会 ， 请 留意 群 内 通知 。 





BRAN. PBSS BARA. FHSS 





骨 文 书法 家 郝 新 安 、 国 





币 ， 她 的 认真 和 敬业 令 我 折服 。 
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书法 家 王 德 云 等 130 位 日 行 一 刻 艺术 天 使 们 两 


感谢 所 有 读者 ， 希 望 这 本 书 对 您 的 学 习 有 所 帮助 。 
2017 年 7 月 于 北京 月 亮 河 


第 一 篇 “基础 入 门 篇 


第 1 章 学 前 准备 





小 程序 是 2017 生 


FE1 月 9 





自己 的 产品 与 微 信 8 亿 用 户 相连 接 。 使 














微 信 推出 的 一 种 免 安 装 、 


























完 即 走 的 轻 App。 它 基于 微 信 环 境 运行 ， 不 需要 用 户 安装 。 开 发 者 可 以 基于 微 信 开 放 的 小 程序 技术 规范 ， 开 发 自己 的 小 程序 ， 并 日 
用 小 程序 技术 开发 的 轻 App， 具 有 入 门 学 习 简 单 、 开 发 简便 快捷 、 上 线 审核 门槛 低 等 优势 。 


工 欲 善 其 事 ， 必 先 利 其 器 。 在 开始 学 习 小 程序 开发 之 前 ， 需 要 先 注册 一 个 小 程序 账号 ， 并 在 本 机 安装 微 信 开 发 者 工具 。 


1.1 注册 账号 





具有 出 色 的 体验 ， 可 以 被 便捷 地 获取 与 传播 


订阅 号 


具有 信息 发 布 与 传播 的 能 力 


适合 个 人 及 媒体 注册 


小 程序 


适合 有 服务 内 容 的 企业 和 组 织 注 册 


选择 要 注册 的 账号 类 型 ， 即 小 程序 。 然 后 按 要 求 填写 账号 信息 ， 如 图 1-2 所 示 。 





首先 ， 在 电脑 上 打开 https://mp.weixin.qq.com/， 在 页 面 右上 角 单 击 “ 立 即 注册 ”， 如 图 1-1 所 示 。 





请 选择 注册 的 帐号 类 型 





© 服务 号 


请 在 微 信 上 线 ， 让 


具有 用 户 管 理 与 提供 业务 服务 的 能 力 


合 企业 及 组 织 注册 


O sus 


具有 实现 企业 内 部 沟通 与 内 部 协同 管理 的 能 
适合 企业 客户 注册 


四 账号 信息 一 OMMMA 一 人 @ 信 息 登记 


每 个 邮箱 仅 能 申请 一 个 小 程序 已 有 微 信 小 程序 ? 立即 登录 


邮箱 
作为 登录 账号 ， 请 填写 未 被 微 信 公众 平台 注册 ， 
未 被 微 信 开放 平台 注册 ， 未 被 个 人 微 信号 绑 定 的 





邮箱 
密码 | 
字母 、 数 字 或 者 英文 符号 ， 最 短 8 位 ， 区 分 大 小 
5 
确认 密码 
请 再 次 输入 密码 
验证 码 WPA k 
你 已 阅读 并 同意 《 微 信 公 众 平台 服务 协议 》 及 《 微 信 小 
程序 平台 服务 条 款 》 
ETS 


图 1-2 


提交 后 ， 会 看 到 激活 账号 的 页 面 ， 如 图 1-3 所 示 ， 上 面 显 示 已 将 确认 邮件 发 送 到 之 前 注册 的 邮箱 里 。 


中 帐号 信息 一 @ 邮箱 激活 一 OF ABic 


pa 
激活 公众 平台 帐号 


感谢 注册 ! 确认 邮件 已 发 送 至 你 的 注册 邮箱 : 
4693139@qq.com。 请 进入 邮箱 查看 邮件 ， 并 激 


活 公众 平台 帐号 。 
| 登录 邮箱 | 


没有 收 到 邮件 ? 

1、 请 检查 邮箱 地 址 是 否 正 确 ， 你 可 以 返回 重新 
填写 。 

2、 检 查 你 的 邮件 垃圾 箱 

3、 若 仍 未 收 到 确认 ， 请 尝试 重新 发 送 


进入 邮箱 ， 打 开 收 自 “weixinteam” 的 邮件 ， 单 击 激活 链接 ， 如 图 1-4 所 示 。 





Q@ 帐号 信息 一 ORAA 一 OF BBic 


用 户 信息 登记 


微 信 公众 平台 致力 于 打造 真实 、 合 法 、 有 效 的 互联 网 平台 。 为 了 更 好 的 保障 你 和 广大 微 信用 户 的 合法 权 
蔓 ， 请 你 认真 填写 以 下 登记 信息 。 
为 表述 方便 ， 本 服务 中 , “用户 "也 称 为 "开发 者 "或 "你 "。 


用 户 信息 登记 审核 通过 后 : 

1. 你 可 以 依法 享有 本 微 信 公众 帐号 所 产生 的 权利 和 收益 ; 

2. 你 将 对 本 微 信 公众 帐号 的 所 有 行为 承担 全 部 责任 ; 

3. 你 的 注册 信息 将 在 法 律 允 许 的 范围 内 向 微 信用 户 展示 ; 

4. 人 民法 院 、 检 察 院 、 公 安 机 关 等 有 权 机 关 可 向 腾讯 依法 调 取 你 的 注册 信息 等 。 


请 确认 你 的 微 信 公 众 帐 号 主体 类 型 属于 政府 、 媒 体 、 企 业 、 其 他 组 织 、 个 人 ， 并 请 按照 对 应 的 类 别 进 行 
信息 登记 。 
点 击 查看 ' 微 信 公 众 平台 信息 登记 指引 。 


主体 类 型 如 何 选 择 主体 类 型 ? 
个 人 企业 政府 ”媒体 其 他 组 织 


| 继续 | 





图 1-4 
在 “主体 类 型 ”的 选项 中 选择 “个 人 ”， 并 填写 相关 信息 。 


在 注册 过 程 中 ， 会 用 到 一 个 微 信 账号 来 扫 码 验证 身份 。 这 个 微 信 账 号 即 为 管理 员 账号 ， 在 以 后 的 开发 过 程 中 会 用 到 。 


Oze 每 个 微 信 仅 能 绑 定 为 5 个 小 程序 账号 的 管理 员 ， 这 与 公众 号 的 绑 定 限制 是 相同 的 。 已 经 绑 定 了 公众 号 账号 的 微 信 ， 不 影响 再 与 小 程序 账号 进行 绑 定 。 


对 于 公众 号 和 微 信 账 号 ， 每 个 身份 证 都 有 5 个 名 人 额 的 注册 上 限 ， 但 小 程序 账号 目前 没有 这 个 限制 。 





注册 成 功 的 截图 如 图 1-5 所 示 。 











信息 提交 成 功 。 








图 1-5 


单 击 图 1-5 中 的 “前 往 小 程序 ”按钮 ， 自 动 登录 小 程序 微 信 管 理 后 台 。 


然后 从 左 侧 菜单 中 ， 选 择 “ 设 置 ”， 如 图 1-6 所 示 。 


Te 。 微 信 公 众 平台 








<I> ”开发 管理 


你 可 以 前 往 微 信 公 众 平台 使 用 相关 功能 。 


| 小 程序 


be 


3 D & m 





用 户 身 份 


数据 分 析 


模板 消息 


客服 消息 


附近 的 小 程序 


设置 


开发 者 ID 


开发 者 ID 操作 

ApplD( 小 程序 ID) 一 3 

AppSecret( 小 程序 密 钥 ) 生成 
图 1-7 








注意 ， 这 里 需要 将 小 程序 ID 复制 下 来 ， 存 储备 用 。 











12 配置 开发 工具 














微 信 开 发 者 工具 是 微 信 官 方 推出 的 小 程序 开发 工具 ， 集 代码 编写 、 调 试 、 效 果 预 览 等 功能 于 一 体 。 


1.2.1 BR 


打开 下 载 网 址 [1]: 
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 
会 看 到 三 个 版 本 的 下 载 链接 ， 分 别 是 : 


Windows 64, Windows 32, Mac 














选择 与 自己 的 电脑 系统 适 配 的 版 本 。 如 果 是 Windows7+ 系 统 ， 则 选择 Windows 64。 如 果 是 XP 系统 ， 则 选择 Windows 32。 如 果 是 Mac OS 系统 ， 则 选择 Mac。 如 果 使 用 的 是 Windows 7#32 位 系统 ， 
则 选择 Windows 32 版 本 。 
























































2017 年 8 月 22 日 ， 微 信 在 发 布 WXS 的 同时 推出 了 全 新 界面 的 微 信 开发 者 工具 的 Beta 版 本 ,将 “ 微 信 Web 开 发 者 工具 ”更 名 为 “ 微 信 开 发 者 工具 ”。 Beta 版 本 用 于 优先 发 布 新 特征 、 新 组 件 、 新 功能 ,但 
不 建议 在 正式 项 目 中 使 用 。Beta 版 本 可 与 正式 版 本 同时 安装 在 一 台 机 器 之 上 ， 感 兴趣 的 读者 可 打开 下 面 的 网 址 进行 下 载 : 





















































https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/beta.html 


122 ”安装 





此 处 小 程序 的 安装 ， 将 以 Mac OS 系 统 为 例 进行 讲解 。 获 得 dmg 安 装 包 之 后 ， 双 击 打 开 ， 如 图 1-8 所 示 。 














微 信 web 开 发 者 工具 Applications 


图 1-8 





然后 将 “ 微 信 开发 者 工具 ”直接 拖 至 “Applications” 即 可 。 如 果 已 经 安装 了 旧版 本 ， 则 选择 覆盖 。 





1.2.3 “设置 编辑 器 


il 


性 




















安装 完成 后 ， 就 可 以 设置 编辑 器 的 属性 了 。 以 Mac 为 例 ， 依 次 打开 “菜单 ”一 “设置 ”一 “编辑 设置 ”， 如 图 1-9 所 示 。 

















在 图 1-9 中 ， 要 同时 选中 “修改 文件 时 自动 保存 ”和 “编译 时 自动 保存 所 有 文件 ”。 单 击 “ 保 存 ” 按 钮 退出 ， 这 样 设 置 可 以 减少 开发 过 程 中 手动 保存 代码 的 麻烦 ， 此 处 的 设置 对 所 有 项 目 都 生效 。 




















保存 时 自动 编译 小 程序 
自动 折 行 
用 空格 代替 Tab 

| 代码 缩 略 图 


2 





图 1-9 
[中 手动 输入 地 址 比较 麻烦 ， 可 以 在 微 信 公 号 “ 艺 述 思维 ”中 发 送 “ 小 程序 开发 工具 下 载 ” 得 到 相关 链接 。 


1.3 从 quick start 项 目 开始 








现在 ， 可 以 启动 微 信 开发 者 工具 了 ， 选 择 “ 程 序 项 目 ”， 启 动 后 的 界面 如 图 1-10 所 示 。 











eee 小 程序 demo - 微 信 开发 者 工具 v1.01.170925 


poo a aa 


模拟 器 ”编辑 器 ”调试 器 





+ Q 


> O image 
v & page 
>» DO API 
> (4 common 
v EG component 
> C pages 
> © resources 
JS index.js 
{} index.json 
<> index.wxml 
wss index.WXSS 


> O server 
> O simjs 























图 








1-10 








如 果 未 曾 登 录 ， 使 用 管理 员 微 信 账 号 ， 扫 码 就 可 以 登录 “ 微 信 开 发 者 工具 ”了 。 管 理 员 微 信 账 号 是 在 1.1 节 注册 小 程序 账号 时 所 用 的 微 信 账号 。 


1.3.1 创建 项 目 


若 要 创建 新 的 项 目 ， 可 通过 如 下 步骤 来 实现 。 


首先 在 图 1-11 所 示 的 界面 ， 选 择 “本 地 小 程序 项 目 ”。 











做 信 开 


V1.01.170925 


路 


小 程序 项 目 


然后 单 击 下 方 的 “+” 按钮 增加 新 的 项 目 ， 如 图 1-12 所 示 。 



































8 


公众 号 网 页 项 目 





1-11 


长 一 


选择 项 目 类 型 


小 程序 项 目 


编辑 、 调 试 小 程序 


小 程序 开发 者 文档 
小 程序 开发 者 社区 





之 后 会 进入 图 




















小 程序 demo 
/work/code/weapp/weapp-demo/de... 


表单 组 件 与 基础 内 容 组 件 示例 
/work/write/live/1014- 小 程序 基础 内 容 .… 


weui-wxss 示 例 
/work/code/weapp/weui-wxss/dist 





1-12 


1-13 所 示 的 界面 ， 在 其 中 的 ApplD 中 填写 小 程序 ID， 即 在 1.1 节 从 小 程序 微 信 后 台 复 制 的 字符 串 。 至 于 项 目 名 称 ， 可 随意 填写 ， 例 如 “小 白 从 0 到 1 学 开发 ”。 





全 小 程序 项 目 管理 


小 程序 项 目 


编辑 、 调 试 小 程序 


ApPID 


请 填写 小 程序 ApplD， 若 无 可 点 此 体验 
项 目 名 称 小 程序 从 0 到 1 
MBAR /Users/sban/Desktop/123 


创建 QuickStart 项 目 

















之 后 在 这 里 选择 一 个 空 目录 ， 如 图 1-14 所 示 。 





m] (< ss 三 回 By mco 
PAR 分 享 课 
B 我 的 所 有 文件 
<> iCloud Drive 

A 应 用 程序 

mE 桌面 ike 

B 文稿 

O TË 

work 
共享 的 
ae 

© 红色 

© #6 

© 黄色 

© 绿色 

新 建文 件 夹 


zerotoone 


vvvvrvvrvVrVY vv 


<> 


AR 
README.md 


zerotoone > 








1-14 








为 只 有 选择 了 空 目录 ， 才 能 出 现 “ 在 当前 目录 中 创建 quick start 项 目 ”这 个 选项 ， 默 认 是 勾 先 





单 击 “ 添 加 项 目 ”， 即 可 完成 quick start 项 目的 初 建 。 


13.2 ”运行 项 目 


首次 运行 quick start 项 目 时 ， 程 序 会 提示 授权 ， 如 图 1-15 所 示 。 





的 ， 默 许 这 个 设置 。 


G 


取消 


Q 搜索 


选择 


微 信 授权 


申请 获得 以 下 权限 : 


等 ) 


获得 你 的 公开 信息 (Wet, KR 


允许 


人 允许 这 个 请 求 。 在 手机 上 运行 的 时 候 ， 用 户 看 到 的 也 是 类 似 的 提示 。 


这 个 地 方 很 容易 错 点 “拒绝 ” 


quick start 项 目 运 行 之 后 的 3 


按钮 ， 





页 面 如 图 1-1 


因为 在 一 般 情 况 下 ， 主 操作 按钮 总 是 











6 所 示 。 





拒绝 

















居 右 的 。 


WeChat eee 


单 击 自己 的 头像 ， 进 入 “查看 启动 日 志 ” 的 二 级 页 面 ， 如 图 








< 返回 














1-17 所 示 。 





Hello World 














但 看 启动 日 志 


1. 2017/06/03 10:22:42 
2. 2017/06/03 10:22:00 


每 启动 一 次 项 目 ， 这 里 就 会 多 一 条 记录 。 


13.3 ”刷新 项 目 
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要 刷新 项 目 ， 可 单 击 “ 微 信 开 发 者 工具 ” 左 侧 工具 栏 中 的 刷新 按钮 ， 如 图 1-18 所 示 。 
































或 者 按 <Command+B> 组 合 键 (Windows 用 户 按 <Ctrl+B>) ， 重 启 项 目 。 再 次 查看 上 面 的 日 志 页 面 ， 便 多 了 一 条 记录 。 

















本 章 完 成 了 小 程序 账号 的 注册 以 及 开发 工具 的 安装 和 配置 ， 
认 知 。 开 发 者 也 可 以 基于 “quick start” 项 目 开发 自己 的 项 目 。 


ece 


模拟 器 。 “编辑 器 。 ”调试 器 
iPhone 5 v 100% v 


eeeee WeChat > 20:24 


WeChat 


2m PSH 




















本 章 将 调用 豆瓣 接口 ， 实 现 电影 榜 单 的 展示 ， 以 及 检索 、 实 时 检索 、 信 息 展 示 等 功能 。 这 一 章 仪 讲解 前 端 操作 ， 不 涉及 后 端 Go 语言 编程 。 在 学 习 过 程 中 ， 如 果 对 个 别 的 关于 JS、WXSs 的 概念 理解 比较 





困难 ， 可 跳 至 第 15 章 和 第 16 章 查看 相关 内 容 。 





2.1 从 splash 功 能 开始 








首次 进入 某 些 App 时 ， 通 常 在 界面 的 底部 有 三 个 面板 指示 点 ， 




















本 节 将 以 实现 这 个 功能 来 开启 小 程序 的 实践 之 旅 。 


2.1.1 创建 项 目 




















接 下 来 开始 逐步 实现 splash 功 能 ， 首 先 打 开 微 信 开发 者 工 








相关 参数 在 图 2-1 中 已 有 展示 ， 需 要 注意 的 是 ，“ 项 目 目录 ” 






























































创建 了 “quick start” MA. “quick start” 项 目 相当 于 其 他 编程 语言 中 的 “Hello world” 程 序 ， 旨 在 帮助 初学 者 快速 建立 对 小 程序 开发 的 


从 第 2 章 开 始 ， 本 书 将 进入 小 程序 项 目 实战 。 


小 程序 从 0 到 1 - 微 信 开 发 者 工具 v1.01.170925 


普通 编译 


+ Q 


> 四 pages 
> O utils 
5 app.js 
{) app.json 
wss app.WXSS 
{) project.config.json 
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分 别 对 应 于 三 张 图 片 ， 可 以 左右 滑动 查看 。 














， 单 击 “+” 号 按钮 创建 新 项 目 ， 如 图 2-1 所 示 。 














Yee MEG 


/**app. wxXss**/ 
.Container { 
height: 100%; 
display: flex; 
flex-direction: 
column; 
align-items: center; 
justify-content: 
Space-between; 
padding: 200rpx 0; 
box-sizing: 
border-box; 


} 





必须 选择 一 个 空 目 录 ，“AppID” 和 “项 目 名 称 ” 需 要 根据 自己 的 实际 情况 来 填写 ， 然 后 单 击 “ 添 加 项 目 ” 按 钮 。 


之 后 ， 单 击 工具 栏 中 的 “详情 ”按钮 ， 得 到 图 2-2 所 示 的 界面 。 

















在 图 2-2 中 ， 选 中 框 线 中 的 所 有 复 选 框 ， 特 别 是 其 中 的 “开发 环境 不 检验 请 求 域名 ”、TLs 版 本 以 及 HTTP 证 书 。 如 果 不 选 中 该 复 选 框 ， 那 么 请 求 豆 办 API 将 会 失败 。 


微 信 Web 开 发 者 工具 v0.17.172600 


添加 项 目 


AppID ”wxf92f5dfe1d6a5ad2 


填写 小 程序 ApplD 无 ApplD 


项 目 名 称 EWR 


MAAR jwork/code/weappzerotoone/code/ a i HH 


在 当前 目录 中 创建 quick start 项 目 





touristappid 
/Users/sban/Desktop/123 
6 KB 


无 


腾讯 云 状态 


ES6 转 ES5 


上 传代 码 时 样式 自动 补 全 
代码 上 传 时 自动 压缩 
不 校 验 安全 域名 、TLS 版 本 以 及 HTTPS 证 书 





操作 完成 ， 至 此 即 成 功 创建 了 一 个 新 的 项 目 。 


2.1.2 ”隐藏 模拟 器 














在 创建 项 目 之 后 ， 我 们 就 来 完成 这 项 操作 。 在 微 信 开 发 者 工具 中 ， 单 击 工具 栏 中 的 “编辑 ”按钮 ， 切 换 到 编辑 状态 ， 如 图 2-3 所 示 。 


























eoo 微 信 web 开 发 者 工具 v0.17.172600 
@ Ot Bape ~ app,json_ x 
1 { 
> S 2 pages": [ Ld 
> Ba utils 3 “pages/index/index", 
i 4 "pages/logs/logs" 
3] app.js -E 
app.json 6 "window": { 
7 “backgroundTextStyle": "light", 
{ } app.wxss 8 "navigationBarBackgroundColor": "#ffE", 
《1> 9 “navigationBarTitleText": "WeChat", 
调试 10 “"navigationBarTextStyle":"black” 
11 } 
12 } 
= 12 
项 目 
已 
a= 
编译 
+H 
后 台 
e 
缓存 
app.json 25:3 JSON 
Vv J 
图 2-3 





单 击 左 上 角 的 手机 图 标 ， 使 得 模块 器 在 编辑 模式 下 隐藏 ， 此 举 将 便于 编辑 代码 。 如 果 需 要 预览 ， 请 切换 至 调试 模式 。 














2.1.3 ”快捷 创建 页 面 








创建 新 页 面 的 常用 方法 有 以 下 两 种 : 














第 一 种 方法 是 在 文档 树 中 单 击 打开 appjson 文 件 ， 如 图 2-4 所 示 。 
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图 2-7 

















appjson 是 小 程序 的 全 局 配置 文件 ， 在 这 个 文件 中 可 以 设置 页 面 路 径 、 窗 口 样式 、 网 络 超时 时 间 及 tarBar 等 。 











在 打开 的 app.json 文 件 中 ， 将 光标 定位 在 “pages/index/index” 这 一 行 ， 
“pages/douban/index” 和 “pages/douban/splash”， 如 图 2-5 所 示 。 























为 在 1.2 节 中 已 经 设置 了 编辑 器 自动 保存 文件 ， 所 以 此 处 无 须 保存 。 



































在 文档 树 中 单 击 展开 pages 





录 ， 可 以 看 到 文件 已 经 自动 生成 ， 如 图 2-6 所 示 。 



































使 








这 种 方法 可 以 显著 提高 新 建 page 页 面 文件 的 效率 。 


第 二 种 标准 的 新 建 页 面 的 方法 如 图 2-7 所 示 。 





首先 ， 在 文档 树 中 点 选 目标 后 面 的 “…” 选 项 按钮 ; 其 次 ， 单 击 “ 新 建 ”; 最后， 选择 新 建 的 文件 类 型 。 
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这 种 方法 比较 麻烦 、 低 效 ， 建 议 直 接 使 








快捷 自动 创建 法 。 至 于 自动 生成 的 .json 与 .wxss 文 件 ， 如 果 有 








不 到 也 不 











删除 。 项 目 在 上 传 过 程 中 会 自动 压缩 ， 无 须 介意 这 些 空 文件 。 如 果 要 F 








置 文件 ， 则 省 去 了 再 次 创建 的 麻烦 。 


2.1.4 引用 simjs 类 库 














ind 


/* pages/d 


同时 按 <Alt+Shift+Down> 组 合 键 两 下 ， 复 制 出 两 行 新 的 “pagesindex/index”。 将 新 复制 的 两 行 分 别 修改 


到 jjson 页 面 配 





sim,js 类 库 是 笔者 开发 的 一 个 开源 类 库 ， 旨 在 帮助 初学 者 快速 开发 小 程序 前 端 。 











在 电脑 上 打开 https://github.comyrixingyike/sim.js， 或 者 直接 扫描 下 方 的 二 维 码 ， 下 载 sim.js 类 库 压 缩 包 。 




















打开 github 页 面 ， 单 击 Download Zip 按 钮 ， 下 载 源 码 包 ， 如 图 2-8 所 示 。 
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Use an SSH key and passphrase from acq@junt. 





git@github.com:rixingyike/sim.js.gi 


Open in Desktop Download ZIP 


另外 还 有 一 种 方法 ， 即 在 命令 行 终端 中 使 用 git clone 指 令 下 载 源码 ， 这 种 方法 更 普遍 ， 稍 后 会 有 介绍 。 


四 





现在 将 下 载 的 源码 ， 解 压 至 豆 豆 电影 小 程序 的 根 目 录 之 下 ， 如 图 2-9 所 示 。 
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然后 在 文档 树 中 打开 appjs 文 件 ， 在 顶部 引用 sim.js 类 库 : 





let app = require("./sim.js/index.js") 





将 第 4 行 代码 





App ({ 





替换 为 





App (Object.assign (app, { 





KER TERA: 





H 





经 过 以 上 步骤 ，sim.js 引 入 完毕 。 这 两 步 注入 将 sim.js 类 库 提供 的 工具 类 方法 ， 附 在 了 App 对 象 之 上 。 在 接 下 来 的 开发 中 ， 通 过 getApp () 来 获取 App 对 象 将 能 通过 它 使 用 sim.js 类 库 提供 的 这 些 方法 。 








let 是 JS 语 言 声明 变量 的 关键 字 ， 关 于 变量 的 更 多 信息 ， 请 参见 本 书 的 15.1.1 节 。 


2.1.5 ”实现 splash 效 果 


首先 ， 在 文档 树 中 打开 pages/doubany/splash.wxml 文 件 ， 将 代码 修改 为 : 





<swiper style="height: 100%;width: 100%;" indicator-dots> 
<swiper-item wx:for="{{ subjects }}" wx:key="{{ item.id }}" style="flex: 1;"> 


<image src="{{ item.images.large }}" mode="aspectFill" style="position: absolute;height: 100%;width: 100%;opacity: .8;" /> 
</swiper-item> 
</swiper> 





关于 swiper 组 件 的 更 多 内 容 ， 请 参见 本 书 的 11.3 节 。 





这 里 使 用 了 swiper 组 件 ， 其 中 的 indicator-dots 是 布尔 属性 ， 不 需要 填写 任何 值 ， 仅 仅 放 在 那里 就 能 表示 其 值 为 true， 与 填写 任何 值 均等 效 。 























swiper-item 是 swiper 组 件 的 子 项 ， 有 多 少 张 图 片 便 有 多 少 个 子 项 。 它 的 宽 高 会 被 自动 设置 为 100%， 所 以 无 须 重 复 设置 。 对 全 屏 起 决定 性 作用 的 ， 则 是 swiper 的 style 属 性 ， 它 将 宽 高 均 设置 为 100%。 














用 于 设置 图 像 的 缩放 策略 。aspectFil 是 最 常用 的 缩放 模式 ， 它 会 保持 一 定 的 比例 将 图 片 完 整地 显示 出 来 。 关 于 image 组 件 的 更 多 内 容 ， 请 参见 本 书 的 14.3 节 。 








image 组 件 的 mode 属 性 





然后 ， 在 文档 树 中 打开 pages/douban/splashjs 文 件 ， 将 代码 修改 为 : 





// pages/douban/splash.js 
Page ({ 
data: { 
subjects: [], 


] 
onLoad(options) { 
let app = getApp() 
app. request ("https://api.douban.com/v2/movie/coming_soon?start= O&count=3") .then ( 
data => { 
this.setData({ subjects: data.subjects }) 














在 上 述 代 码 中 ，subjects 是 wxml 代 码 中 用 于 数据 绑 定 的 数组 。 这 里 使 用 了 app.request 方 法 ， 用 于 请 求 豆 弟 的 API。 获 取 到 数据 之 后 ， 即 可 使 用 setData 方 法 泻 染 视图 。 这 里 的 setData 会 实现 如 下 两 个 

















功能 。 


的 15.2.9 节 。 


- 保存 数据 至 subjects 变 量 。 





“ 通知 页 面 视图 ， 若 数据 有 更 新 ， 则 进行 泻 染 。 



































在 app.request () 方法 返回 的 对 象 上 调用 then 方 法 ， 是 处 理 接口 调用 成 功 之 后 的 逻辑 。then 方 法 接受 一 个 函数 为 参数 ， 笔 者 在 这 里 传 入 的 是 使 用 箭头 符号 简写 的 匿名 函数 。 关 于 箭头 函数 ， 参 见 本 书 





在 2.1.4 节 引用 sim.js 类 库 ， 就 是 为 了 此 时 在 这 里 使 用 。2.1.4 节 通过 注入 方法 修改 了 默认 的 App 定 义 ， 是 为 了 把 sim.js 类 库 的 request 方 法 加 到 App 对 象 上 。 选 择 App 对 象 注入 ， 可 以 最 大 限度 地 减少 项 目 





对 框架 的 注入 依赖 。 


在 任何 页 面 ， 只 要 能 通过 getApp () 取得 全 局 唯一 的 App 对 和 象 ， 就 可 以 使 用 sim.js 类 库 的 功能 。 
1. 如 何 设置 首页 


在 文档 树 中 打开 appjson 文 件 ， 将 光标 定位 到 图 2-10 所 示 的 这 一 行 。 


app.json x 





"sages": [ 


"“pages/index/index", 





"“paces/douban/index", 


"pages/logs/logs" 


-J OO OO DD 
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图 2-10 














同时 按 下 <Command+Up> (或 <Ctrl+Up>) 组 合 键 , 将 “pages/douban/splash” 移 至 首 行 ， 因 为 首 行 意味 着 首页 。 


2. 如 何 添加 样式 





此 时 已 将 “pages/douban/splash” 设 置 为 首页 ， 同 时 按 下 <Command+B> 组 合 键 (或 <Ctrl+B> 组 合 键 ) 刷新 项 目 ， 什 么 都 看 不 到 。 为 什么 ? 接 下 来 将 通过 调试 面板 来 寻找 原因 。 











在 调试 工具 区 域 ， 切 换 至 wxm 面 板 ， 可 以 看 到 已 经 泻 染 了 三 个 swiper-item， 如 图 2-11 所 示 。 








iPhone 6 Plus T wifi X [k Console Sources Network Storage Wxm » 


了 <page> 
v “swiper indicator-dots style= heig 


WeChat eee 100%; 
> <swiper-item style="flex: 110%; position: absolute; width: 


100%; height: 100%; transform: translate(O%, 0%) translateZ(0 
A px); will-change: auto;">...</swiper-item> 

> <swiper-item style="flex: 110%; position: absolute; width: 
100%; height: 100%; transform: translate(100%, 0%) translateZ 
(Opx); will-change: auto;">...</swiper-item> 

> <swiper-item style="flex: 110%; position: absolute; width: 
100%; height: 100%; transform: translate(200%, 0%) translateZ 
(Opx); will-change: auto;">...</swiper-item> 

</swiper> 
</page> 








wx-swiper 414px x Opx 
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但 是 swiper 的 高 度 为 0。 这 是 因为 在 小 程序 中 ，page 容 器 的 高 度 默认 是 0。 将 swiper 组 件 的 高 度 样式 设置 为 1009% 是 无 用 的 ， 因 为 父 容器 没有 高 度 。 























解决 办 法 很 简单 ， 在 文档 树 中 打开 app.wxss 文 件 ， 在 尾部 添加 以 下 样式 : 





page{ 
height: 100%; 
background-color: #f9f9f9; 
} 





这 里 除了 高 度 以 外 ， 还 添加 了 一 个 浅 灰色 的 背景 色 。 浅 灰色 的 默认 背景 有 助 于 设计 产品 的 U1。 

















再 次 按 下 <Command+B> 组 合 键 (或 <Ctrl+B> 组 合 键 ) 刷新 项 目 ， 功 能 已 然 正 常 。 之 前 没有 显示 ， 是 因为 swiper 容 器 没有 获得 足够 的 高 度 ， 我 们 通过 调试 面板 查 出 了 问题 所 在 。 善 用 调试 面板 ， 有 助 
于 在 开发 中 快速 找到 出 错 的 缘由 。 


























2.1.6 下 载 尖 码 


在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 | 问题， 可 以 通过 如 下 方式 来 解决 。 
“ 加 入 小 程序 微 信 群 与 作者 以 及 其 他 读者 一 同 探讨 。 微 信和 扫描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作 者 的 源码 ， 对 上 照 查找 问题 。 在 公众 号 发 送 “ 豆 豆 电 影 2.1” 获 取 下 载 地 址 。 


2.2 ”缓存 本 地 数据 


通常 ， 首 次 进入 小 程序 应 用 时 ， 会 展示 全 屏 图 片 滑动 ， 第 二 次 进入 时 则 不 再 展示 ， 本 节 就 来 实现 这 个 功能 。 








2.2.1 使 用 wx.setStorage 接 口 





接口 wx.setStorage 用 于 从 本 地 缓存 中 异步 获取 指定 key 所 对 应 的 内 容 。 其 与 接口 wx.getStorage 相 对 应 。 














在 文档 树 中 打开 app.json 文 件 ， 将 pages/douban/index 调 整 为 首页 。 


打开 pages/index/indexjs 源 码 ， 修 改 onLoad 函 数 ， 代 码 如 下 : 





onLoad (options) { 
wx.getStorage ({ 
key: 'has_shown_splash', 
fail: err => { 
wx. redirectTo ({ 
url: '/pages/douban/splash', 




















其 中 ，wx.redirectTo 是 页 面 跳 转 接口 ， 用 于 从 当前 页 面 跳 转 至 pages/douban/splash 页 面 。 























打开 pages/douban/splash.js 源 码 ， 在 onLoad 未 尾 添 加 如 下 代码 : 





wx. setStorage ({ 
key: "has_shown_splash", 
data: true 

t) 





这 里 的 has_shown_splash 是 键 名 ， 必 须 与 pages/index/indexjjs 中 的 代码 保持 一 致 。 


2.2.2 ”使 用 storage 面板 


按 <Command+B> 组 合 键 (或 <Ctrl+B> 组 合 键 ) 刷新 项 目 ， 程 序 首 先 会 进入 pages/douban/index， 随 后 会 跳 转 到 pages/douban/splash 页 面 。 再 次 刷新 ， 本 地 已 有 记忆 ， 因 此 不 会 再 看 到 splash 页 
面 。 那 么 该 功能 是 如 何 实现 的 呢 ? 下 面 一 起 来 看 一 下 。 








在 调试 工具 区 域 ， 打 开 Storage 面 板 ， 如 图 2-12 所 示 。 














tr Console Sources Network Storage » 


请 输入 key 值 String 请 输入 data 值 


[1497409151470, 1497409139790, 1497409126266, 
1497409125196, 1497409104418, 1497409089022, 
1497408878095, 1497408847358, 1497408845339, 
1497408832929, 1497408805279, 1497408803785, 
1497408784407, 1497408770226, 1497408748382, 
1497408735493] 


has_shown_splash Boolean true 


从 这 个 面板 中 可 以 看 到 本 地 缓存 中 保存 的 所 有 数据 ， 包 括 保 存在 pages/douban/splash 页 面 的 has_shown_splash 变 量 ， 这 就 是 本 地 已 有 的 记忆 数据 。 


logs Array 
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若 单 击 “ 删 除 ”按钮 ， 再 按 <Command+B> 组 合 键 (或 <Ctrl+B> 组 合 键 ) 刷新 项 目 ， 就 又 可 以 看 到 splash 全 屏 图 片 滑动 的 效果 了 。 











has shown_splash 变 量 上 面 的 一 行 是 quick start 项 目 默认 生成 的 代码 所 记录 的 缓存 ， 相 关 代码 在 pages/logs/logsjs 中 。 


2.2.3 ”省略 function 关 键 字 


在 快捷 方法 自动 生成 的 页 面 js 代码 中 ，onLoad 函 数 默 认 是 这 样 的 : 


删除 


= 
ET 





onLoad: function (options) { 





而 笔者 声明 的 onLoad 是 这 样 的 : 





onLoad (options) { 








两 者 的 不 同 之 处 在 于 ， 笔 者 的 声明 没有 使 用 function 关 键 字 。 























笔者 使 用 的 是 ES6 语 法 ， 使 用 ES6 语 法 不 仅 可 以 减少 键盘 作业 ， 还 可 以 在 匿名 函数 内 部 使 用 this 关 键 字 。 如 下 所 示 ， 方 法 then 接 受 的 参数 即 为 匿名 函数 : 


























app. request ("https://api.douban.com/v2/movie/coming_soon?start=0&count=3") .then ( 
lata => { 
this.setData({ subjects: data.subjects }) 
} 








其 中 ，data= >{} 是 一 个 ES6 语 法 声明 的 匿名 函数 。data 是 匿名 函数 的 形 参 。 旧 式 写法 是 这 样 的 : 











onLoad(options) { 
let app = getApp() 
let that = this 
app. request ("https://api.douban.com/v2/movie/coming_soon?start=0&count=3") .then ( 
function(data) { 
that.setData({ subjects: data.subjects }) 
} 











如 上 述 代码 所 示 ， 如 果 不 使 用 ES6 语 法 ， 则 需要 先 于 匿名 函数 之 外 声明 一 个 that 变 量 指向 this， 才 能 在 匿名 函数 内 部 访问 真正 的 this 对 象 。 



































在 匿名 函数 内 部 直接 使 用 this 对 象 ， 将 无 法 调用 其 setData 方 法 。 匿 名 函数 内 部 的 this 对 象 ， 并 不 是 当前 页 面 的 page 对象。 读者 可 以 自行 测试 一 下 。 
































Orr 在 2.1.1 节 中 ， 我 们 选择 了 项 目 属性 面板 中 的 “开启 ES6 转 ES5” 选 项 ， 只 有 这 样 才能 在 项 目 中 使 用 ES6 语 法 。 每 次 新 建 一 个 项 目 时 ， 都 不 妨 首先 开启 这 个 选项 。 


2.3 ”实现 页 首 splash 效 果 











本 节 将 学 习 如 何在 小 程序 页 首 实现 图 2-13 所 示 的 效果 。 


WeChat eee 


6 月 9 日 卷土重来 
3D/IMAX 30/8 
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2.3.1 使 用 swiper 组 件 


























2.1.5 节 使 用 swiper 组 件 实现 了 全 屏 的 splash 效 果 ， 本 节 将 再 次 使 用 这 个 组 件 实现 页 面 项 部 的 splash 效 果 。 























切换 至 编辑 模式 ， 在 文档 树 中 打开 pages/dou-ban/index.wxm| 文 件 ， 修 改 代码 为 : 


<swiper style="height:450rpx" indicator-dots autoplay="true" interval="5000" duration="1000"> 
<swiper-item wx:for="{{ boards[0] .movies }}" wx:key="{{ item.id }}"> 
<navigator hover-class="none"> 


<image style="height : 450rpx;width:750rpx;" src="{{ item.images.large }}" mode="aspectFill" /> 
</navigator> 
</swiper-item> 
</swiper> 






































FF， 此 次 设置 height 为 450rpx。rpx 是 responsive pixel 的 简称 ， 是 小 程序 开发 中 实现 屏幕 自 适应 UI 的 长 度 单位 。 在 页 面 设计 上 ， 微 信 小 程序 规定 





这 里 使 用 的 仍然 是 swiper 组 件 ， 与 2.1.5 节 的 不 同 之 处 在 了 
幕 的 宽 恒 为 750 rpx。iPhone6 屏 幕 的 宽度 为 375px， 换 算 过 来 则 是 1rpx=0.5px， 以 此 设计 UI 元 素 的 尺寸 。 其 他 型 号 的 手机 ，1rpx 所 代表 的 宽度 将 视屏 宽 而 定 。 









































此 处 设置 swiper 高 度 为 450rpx， 比 屏 宽 的 一 半 上 略 高 ， 这 也 是 常见 的 设计 比例 。 











在 文档 树 中 打开 pages/douban/index.js 页 面 ， 修 改 data 声 明 为 : 





data: { 
boards: [{ key: 'in theaters' }, { key: 'coming_soon' }, { key: 'top250' }], 


b 




















Hp, "in theaters” “coming_soon” 等 是 豆 淮 API 需要 用 到 的 参数 。 





23.2 ”批量 调用 接口 















































setData 方 法 泻 染 页 面 。 这 种 场景 比较 适合 使 用 sim.js 类 库 

















在 当前 页 面 “pages/douban/index” 的 逻辑 层 代码 中 ， 我 们 需要 调用 豆 辨 接口 三 次 拉 取 三 个 不 同 的 榜 单 数据 。 在 全 部 拉 取 完成 之 后 ， 再 调 















































提供 的 app.promise.all 方 法 批量 调用 接 























批量 调用 接口 ， 可 采用 如 下 方式 。 





























添加 一 个 retrieveData 函 数 : 


retrieveData() { 
let app = getApp() 


var promises = this.data.boards.map(function (board) { 
return app.request (“https://api.douban.com/v2/movie/${board.key}?start= 0&count=10") 
.then (function (d) { 
if (!d) return board 
board.title = d.title 
board.movies = d.subjects 


return board 
}) .catch (err => console. log (err) ) 


H) 


return app.promise.all (promises) .then (boards => { 
if (!boards || !boards.length) return 
this.setData({ boards: boards, loading: false}) 
}) 














这 个 函数 主要 完成 如 下 两 件 事情 。 





“ 依据 参数 不 同 ， 从 豆 关 API 拉 取 三 次 列表 。 





“ 待 三 次 拉 取 全 部 完成 之 后 ， 调 用 setData 设 置 数据 通知 页 面 泻 染 。 


simjjs 类 库 中 复合 了 bluebird 类 库 ， 这 是 一 个 Promise 类 库 ， 主 要 提供 了 如 下 四 种 功能 。 





+ 使 用 then 实 现 链 式 调用 。 


+ 使 用 Promise. 纪 实现 并 行 调用 。 


- 使 用 Promise.race 实 现 竞赛 调用 。 



































































































































+ 使 用 catch 捕 捉 异 常 。 

sim.js 框 架 将 Promise 对 象 注入 到 了 App 对 象 上 ， 所 以 在 这 里 可 以 使 用 app.promise.all 进 行 并 行 调用 。 它 与 直接 使 用 Promise.all 的 效果 是 等 同 的 ， 但 免 去 了 在 Page 页 面 中 再 次 引用 js 类 库 的 麻烦 。 关 于 
Promise， 稍 后 会 有 更 多 的 介绍 。 

代码 中 出 现 的 then 的 用 法 ， 在 2.1.5 节 已 经 讲 过 ， 它 表示 异步 调用 成 功 之 后 应 执行 什么 。 
2.3.3 ”使 用 wx.getStorage 接 口 

在 2.1.5 节 ， 笔 者 在 “pages/douban/splash” 页 面向 本 地 缓存 中 存 入 了 “has_shown_splash” 变量 ， 用 于 标识 已 经 进入 过 splash 页 面 。 本 节 将 尝试 取出 这 个 变量 ， 如 果 不 为 空 ， 则 调 




















“retrieveData” AW; 如 果 为 空 ， 则 跳 转 至 “pages/douban/splash” 页 面 。 








在 onLoad 函 数 中 增加 对 retrieveData 的 调用 ， 代 码 如 下 所 示 : 

















onLoad (options) { 
wx.getStorage ({ 
key: 'has_shown_splash', 
success: res => { 
this.retrieveData () 


fail: err => { 
wx. redirectTo ({ 
url: '/pages/douban/splash', 
































success 是 接口 wx.getStorage 异 步调 用 成 功 后 调用 的 函数 。 如 果 是 首次 进入 小 程序 ， 没 有 找到 缓存 ， 则 进入 pages/douban/splash 页 面 ; 反之 ， 则 调用 自 建 的 retrieveData 函 数 ， 批 量 拉 取 豆瓣 数据 。 






































2.3.4 下 载 源码 





在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 
+ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作者 的 源码 ， 对 上 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电 影 2.3” 获 取 下 载 地 址 。 


2.4 ”实现 横向 滑动 列表 





本 节 将 实现 可 以 左右 滑动 的 列表 ， 如 图 2-14 所 示 。 
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241 JRE 
在 文档 树 中 打开 pages/douban/index.wxml 文 件 ， 添 加 如 下 代码 : 


<view wx:for="{{ boards }}" wx:key="{{ item.key }}" 
<view class="weui-panel_hd"> 
{{ item.title }} 
</view> 


class="weui-panel weui-panel_access"> 


<view class="weui-panel__bd"> 
<view style="padding:10px" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> 
<scroll-view scroll-x> 
<view style="display: flex; "> 
<navigator wx:for="{{ item.movies }}" wx:key="{{ item.id }}"> 
<view style="display: flex; flex-direction:column; width: 180rpx;margin:10rpx; "> 
<image style="width: 180rpx; height :250rpx;"_ src item.images.large }}" mode="aspectFill" /> 


<text style="text-align: center; overflow:hidden; white-space : nowrap; text-overflow:ellipsis;font-size:13px; padding-top:5rpx;">{{ item.title }}</text> 
</view> 


</navigator> 
</view> 
</scroll-view> 
</view> 
</view> 





<view class="weui-panel_ ft"> 
<navigator class="weui-cell weui-cell access weui-cell link"> 
<view class="weui-cell__bd">3#%</view> T 
<view class="weui-cell__ft weui-cell ft in-access"></view> 
</navigator> 2 
</view> 
</view> 



































其 中 ，scroll-view 组 件 用 于 展示 一 个 可 滚动 区 域 ，scroll-x 属 性 代表 横向 滚动 。 














若 要 实现 横向 滚动 ， 则 容器 内 容 必 须 超过 屏幕 宽度 。 在 子 视 | 


























司 view 中 ， 设 置 display 样 式 为 flex，flex 是 Flexible Box 的 缩写 ， 意 为 “弹性 布局 ”， 设 置 为 此 属性 ， 即 view 内 容 可 以 向 右 无 限 伸展 。 












































wx: for 用 于 将 数组 泻 染 在 视图 上 ， 数 组 有 几 项 便 泻 染 几 行 。 从 2.3.2 节 的 代码 可 以 得 知 ，boards 数 组 有 三 个 元 素 ， 所 以 这 旦 








会 泻 染 三 个 附 有 “weui-panel” 样 式 的 view。 























wx: for 可 以 嵌 套 使 用 ， 在 上 面 的 wxml 代 码 中 ， 横 向 列表 的 泻 染 是 通过 嵌 套 泻 染 来 实现 的 。 被 循环 数组 的 当前 项 的 默认 变量 名 称 是 item， 在 被 嵌 套 的 wx: for 里 ， 子 item 会 将 父 item 覆 盖 。 





























在 图 2-15 中 ， 第 一 个 item 指 的 是 数组 boards 的 子 项 ， 第 二 个 及 其 后 面 的 item 指 的 是 boards.movies 的 子 项 。 











18 E <view style="display: 









19 E <navigator wx:for=" pvies }}" wx:key=" ap} "> 

20 E <view style="display:tlex;flex-direction:column;wiach: 1@0rpx;margin:10rpx;"> 

21 <image style="width:180rpx;height:250rpx;" src=" item.images.large }}" mode="aspectFill 
22 <text style="text-align:center;overflow: hidden; white-space: nowrap; text-overflow:ellipsis; 


font-size:13px;padding-top:Srpx;">{{ item.title }}</text> 














23 </view> 
24 </navigator> 
25 </view> 
2-15 
24.2 引用 样式 


在 文档 树 中 打开 app.wxss 文 件 ， 在 顶端 添加 如 下 代码 : 


@import 'sim.js/weui/weui.wxss'; 























这 里 的 @import 是 Css 引用 另 一 个 样式 文件 的 语法 ， 它 与 wxml 中 使 用 的 import 并 不 相同 。 












































weui 是 一 个 样式 库 ， 非 常 符合 微 信 小 程序 设计 指南 的 要 求 ， 应 用 在 项 目 中 可 以 显著 提高 初学 者 的 开发 速度 。 


24.3 下 载 源码 











在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 


“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作者 的 源码 ， 对 上 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电 影 2.4” 获 取 下 载 地 址 。 














单 击 主页 列表 中 的 单项 ， 会 进入 电影 详情 页 ， 并 展示 电影 的 一 些 基 本 信息 ， 如 图 2-16 所 示 ， 本 节 就 来 实现 这 样 的 功能 。 


























secos WeChat > 16:24 


猩 球 岩 起 3; 终极 之 战 





ARARE MERC 





98% 


{> 





猩 球 崛起 3: 终极 之 战 (2017) 


2.5.1 格式 化 代码 




















加 2-10 




















使 用 2.1.3 节 快捷 创建 页 面 的 方法 ， 添 加 pages/douban/item 页 面 ， 用 于 展示 电影 详情 。 
































在 文档 树 中 ， 打 开 pages/douban/item.wxml| 文 件 ， 添 加 如 下 代码 ， 引 入 weui 样 式 库 : 


@import 'sim.js/weui/weui.wxss'; 








如 果 读者 是 从 笔者 的 源码 中 复制 的 代码 ， 那 么 在 复制 粘贴 之 





后 ， 应 在 文档 





区 右 击 从 弹出 的 右键 菜 





单 中 选择 “格式 化 代码 ”命令 ， 这 样 可 以 快速 将 代码 格式 化 ， 易 读 易 改 ， 如 





图 











2-17 所 示 。 


ma 更 改 所 有 匹配 项 
格式 化 代码 。 OF 


;ox 命令 面板 1 vie.. 





P an fall meee la Wen wee mee mw ss | flaw: 


图 2-17 














2.5.2 aR 


在 文档 树 中 打开 pages/douban/item.js 文 件 ， 修 改 data 变 量 为 : 





data: { 
loading: true, 
movie: {} 





将 onLoad 函 数 修改 为 : 





onLoad(options) { 
let app = getApp() 


app. request (“https://api.douban.com/v2/movie/subject/ ${options.id}*) 
.then (d => { 
this.setData({ movie: d, loading: false }); 
wx.setNavigationBarTitle({ title: d.title }); 

}).catch(e => { 
console.error (e) ; 


t) 





在 上 述 代 码 中 ， 使 用 Promise 方 式 从 豆 小 API 拉 取 数 据 ， 然 后 在 then 回 调 中 取得 数据 并 绑 定 。 





loading 变 量 用 于 指示 数据 是 否 加载 完 成 ， 可 使 用 它 在 页 面 上 显示 一 个 加 载 提示 。 


options 是 从 其 他 页 面 传递 过 来 的 参数 集合 ， 可 从 中 获取 id， 这 将 是 2.5.4 节 wxml 标 签 中 自 定义 的 参数 名 称 。 这 里 使 用 电影 的 id， 从 豆瓣 APl 中 拉 取 单个 电影 的 详细 信息 。 


253 ”视图 层 


在 文档 树 中 打开 pages/doubaryVitem.wxml 文 件 ， 修 改 标签 代码 为 如 下 形式 : 





<loading hidden="{{ !loading }}"> 加 载 中 </1oading> 
<image style="position: fixed;left: 0;top: O;right: 0;bottom: O;height: 100%;width: 100%;z-index: -1000;opacity: .05;" src="{{ movie.images.large }}" mode= "aspectFill" /> 
<scroll-view scroll-y> 
<view class="weui-article"> 
<view class="weui-article_section"> 
<image class="weui-article_ img" src="{{ movie.images.large }}" mode="aspectFit" style="width: 100%;height: 800rpx" /> 
</view> 
<view class="weui-article_hi">{{ movie.title }}({{ movie.year }})</view> 


<view class="weui-article_section"> 
<view class="weui-media-box info" style="margin-top:10rpx;"> 
<view class="weui-media-box info meta"> 评 分 : {{ movie.rating.average }}</view> 
</view> 
<view class="weui-media-box info" style="margin-top:10rpx;"> 


<view class="weui-media-box__info__meta">5H# 
<block wx:for="{{ movie.directors }}" wx:key="{{ item.id }}"> {{ item.name }} </block> 
</view> 
</view> 
<view class="weui-media-box_ info" style=" 
<view class="weui-media-box__info_ met. 












top: 10rpx; "> 





<block wx:for="{{ movie.casts }}" wx:key="{{ item.id }}"> {{ item.name }} </block> 
</view> 
</view> 
</view> 


<view class="weui-article_section"> 
<view class="weui-article p"> 
{{ movie.summary }} 
</view> 
</view> 
</view> 
</scroll-view> 























loading 组 件 并 没有 出 现在 微 信 官方 文档 中 ， 但 它 仍然 可 以 使 用 绑 定 变量 的 方式 来 控制 它 的 显示 。 如 果 组 件 的 属性 是 一 个 布尔 值 ， 那 么 只 有 使 用 这 样 的 绑 定 方法 才 可 能 使 它 的 值 为 false: 





hidden="{{ !loading }}" 














这 里 再 一 次 使 用 了 scroll-view 组 件 ， 但 是 scroll-y 为 true， 代 表 人 允许 纵向 滚动 。 





25.4 页面 跳 转 


在 文档 树 中 打开 pages/doubam/index.wxml 文 件 ， 修 改 wxml 标 签 ， 在 scroll-view 容 器 内 ， 在 navigator 组 件 上 添加 url 属 性 ， 如 图 2-18 所 示 。 








15 <view class="weui-panel_ bd"> 

16 <view style="padding:10px" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell active"> 
17 Kscroll-view sczoll- 交 | 

18 view style="display: flex; "> 







19 <navigator wx:for="{{ item.movies }}" wx:key="{{ item.id }}"> 


20 <view style="display:flex;flex-direction:column;width:180rpx;margin:10rpx;"> 
21 <image style="width:180rpx;height:250rpx;" src="{{ item.images.large }}" mode="aspectFill" /> 
22 <text style="text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 


font-size:13px;padding-top:S5rpx;">{{ item.title }}</text> 


23 </view> 

24 </navigator> 
25 </view> 

26 </scroll-view> 
27 </view> 

28 </view> 
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其 中 的 id 是 在 2.5.2 节 js 代码 中 获取 到 的 参数 。item 是 页 面 名 称 ， 因 为 此 页 与 tem 页 面 位 于 同一 个 目录 之 下 ， 所 以 可 以 使 用 相对 地 址 。 





在 页 面 顶部 的 swiper 组 件 中 ， 在 navigator 组 件 上 添加 url|， 如 图 2-19 所 示 。 








<!--pages/douban/index.wxml--> 
<swiper style="heicght:450rpx" indicator-dots autoplay="true" interval="5000" duration="1000"> 
<swiper-item wx:for="{{ boards[(0).movies }}" wx:key="{{ item.id }}"> 


<navigator ut hover-class="none"> 





<image style="height: 450rpx;width:750rpx;" src="{{ item.images.large }}" mode="aspectFill"” /> 
</navigator> 


</swiper-item> 


O sy HW &F WD FP 


</swiper> 





2-19 











此 时 ， 刷 新 项 目 ， 会 发 现 效果 已 经 完成 。 
2.5.5 下 载 源码 


在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 | 问题， 可 以 通过 如 下 方式 来 解决 。 
“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探 讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作 者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电 影 2.5” 获 取 下 载 地 址 。 


2.6 ”实现 电影 列表 页 





本 节 将 实现 一 个 可 以 上 下 滚动 的 列表 ， 当 滚动 到 底部 时 提示 “继续 滑动 加 载 更 多 ” ， 如 图 2-20 所 示 。 


< 返回 正在 上 映 的 电影 -北京 eee 














异形 : RA 


Alien: Covenant (2017) 


RTT 


闪 仁 流行 (2015) 


新 木乃伊 


The Mummy (2017) 


PRAT ITIR 


Wonder Woman (2017) 


加 勒 比 海 资 5: 死 无 对 证 
Pirates of the Caribbean: Dead Men Tell 
No Tales (201 7) 
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2.6.1 使 用 finally 方 法 

















使 用 2.1.3 节 快速 创建 页 面 的 方法 ,创建 pages/douban/list 页 面 ， 用 于 展示 电影 榜 单 列表 。 


























在 文档 树 中 打开 pages/douban/listjs 文 件 ， 修 改 data 变 量 为 : 





data: { 
type: 'in theaters', 
page: 1, 7 
size: 20, 
total: 1, 
movies: [] 



































其 中 ，type 是 调用 豆瓣 API 时 需要 用 到 的 电影 类 型 。page 是 分 页 的 页 码 ， 代 表 当 前 是 第 几 页 ，size 代 表 每 次 最 多 拉 取 多 少 条 数据 ，total 需 要 从 豆 站 服务 器 获取 ， 默 认 设 置 为 1，movies 是 拉 取 到 的 数 
据 。 由 于 人 允许 查看 多 页 内 容 ， 因 此 movies 是 一 个 累加 数组 。 








然后 ， 在 页 面 数 据 变量 data 下 方 添加 一 个 retrieve 方 法 : 








retrieve() { 


let app = getApp() 
let start = (this.data.page - 1) * this.data.size 


wx. showLoading ({ 
title: ' 加 载 中 ' 
}) 


return app.request (“https://api.douban.com/v2/movie/${this.data.type}?start=${start}&count=$ {this.data.size}.) 
.then (res => { 


if (res.subjects.length) { 
let movies = this.data.movies.concat (res.subjects) 
this.setData({ movies: movies, total: res.total }) 
wx.setNavigationBarTitle({ title: res.title }) 
console.log (movies) 


}) .catch (err => { 
console.error (err) 

}) .finally( ()=> { 
wx. hideLoading () 

}) 




















这 个 方法 用 于 从 豆瓣 API 分 页 拉 取 数 据 ， 默 认 是 从 第 1 页 拉 取 。 如 果 当 前 页 数 大 于 总 页 数 ， 则 不 再 拉 取 。 当 前 页 数 的 改变 在 另 一 个 函数 中 ， 稍 后 会 看 到 。 


























app.request 函 数 返回 Promise 对 象 ， 无 论 接口 拉 取 失败 还 是 成 功 ，finally 回 调 都 会 执行 ， 所 以 在 这 里 需要 隐藏 加 载 提示 。wx.hideLoading 是 隐藏 加 载 提示 的 界面 交互 AP1， 与 之 相对 应 的 ， 先 于 
app.request 调 用 的 wx.showLoading 是 显示 加 载 提示 的 APl。 























concat 是 js 数组 的 方法 ， 用 于 连接 两 个 数组 ， 拼 接 元 素 并 返回 新 数组 。 











console.log (movies) 这 行 代码 用 于 在 控制 台 窗 口 打印 数据 。 















































按 <Command+B> 组 合 键 (或 <Ctrl+B> 组 合 键 ) 刷新 项 目 ， 或 者 等 待 工具 自动 刷新 ， 在 调试 工具 区 域 ， 查 看 Console 面 板 ， 如 图 2-21 所 示 ， 会 看 到 数据 输出 。 
































[Kk Console Sources Network Storage » 


© Y top N v ( Preserve log 


| Filter [m Regex | | Hide network messages D Errors Warnings Info | 


”| A 工具 未 校 验 请 求 域名 、TLS 版 本 以 及 HTTPS 证 书 。 
¥ Sun Jun 18 2017 19:22:10 GMT+0800 (CST) 配置 中 关闭 WRES. TLS 版 本 以 及 HTTPS 证 所 
| A 工具 未 校 验 请 求 域名 、TLS 版 本 以 及 HTTPS 证 书 。 
了 (Object, Object, Object] © 
b @: Object 
Pi: Object 
> 2: Object 
length: 3 
> _proto__: Array[@] 
¥ Sun Jun 18 2017 19:27:33 GMT+0800 (CST) 配置 中 关闭 请 求 域名 、TLS 版 本 以 及 HTTPS 证 所 
“| A 工具 未 校 验 请 求 域名 、TLS 版 本 以 及 HTTPS 证 书 。 





























vw (Object, Object, Object, Object, Object, Object, Object, Object, Object, Obje 

Object, Object, Object, Object, Object, Object, Object) © 

> @: Object 

Pi: Object 

> 2: Object 

> 3: Object < 一 

pb 4: Object 

b5: Object 

>6: Object 

图 2-21 


2.6.2 ”模板 组 件 


在 文档 中 选择 douban 文 件 夹 并 右 击 ， 从 弹出 的 快捷 菜单 中 选择 “新 建 ” 命 令 ， 如 图 2-22 所 示 。 





7 Pays: 


- T= pages 10 size: 


v fm douban Bs 硬盘 打开 
us] index.js 


index.json 


+ 新 建 





<> index.wxml 4% 重 命名 
{ } index.wxss 
[ys] item.js E 删除 


[in] item.json a 查找 


<> item.wxml 


, 23 
{ } Item.wxss 24 retu: 


list.js 25 „tł 
o 26 
[an] list.json an 


ha. 





2-22 




















选择 新 建文 件 的 类 型 为 vxml， 命 名 为 list-template.wxml。 下 面 就 在 这 个 文件 中 新 建 一 个 模板 组 件 ， 然 后 在 pages/douban/list.wxmlI 页 面 中 使 用 。 




















在 文档 树 中 打开 list-template.wxml 文 件 ， 修 改 wxml 标 签 为 : 





<template name="list-template"> 
<scroll-view enable-back-to-top scroll-y bindscrolltolower="1loadMorePage"> 
<view class="weui-panel"> 
<view class="weui-panel__bd"> 
<navigator wx:for="{{ movies }}" wx:key="{{ item.id }}" url="item?id= {{ item.id }}" class="weui-media-box weui-media-box_appmsg" hover- class= "weui-cell activ 
<view class="weui-media-box hd weui-media-box_hd_in-appmsg" style="height: inherit; width:120rpx"> T T 
<image style="width: 128rpx;height: 168rpx;" class="weui-media-box thumb" src="{{ item.images.small }}" /> 
</view> 
<view class="weui-media-box_ bd weui-media-box bd in-appmsg"> 
<view class="weui-media-box title">{{ item.title }}</view> 
<view class="weui-media-box desc">{{ item.original title }} ({{ item.year }})</view> 
<view class="weui-media-box__info"> 
导演 : <block wx:for="{{ item.directors }}" wx:key="{{ item.id }}"> {{ item.name }} </block> 
</view> 
</view> 
<view class="weui-media-box_ ft"> 
<view class="weui-badge">{{ item.rating.average }}</view> 
</view> 
</navigator> 
</view> 
</view> 
<view class="weui-loadmore" wx:if="{ {total>page} }"> 
<view class="weui-loadmore tips"> 继 续 向 下 滑动 加 载 更 多 内 容 </view> 
</view> 
</scroll-view> 
</template> 


























在 一 个 文件 中 定义 模板 组 件 ， 以 便于 在 其 他 页 面 中 复 用 该 组 件 。 不 过 ， 在 这 个 项 目 中 ， 只 有 一 个 页 面 用 到 了 该 组 件 ， 定 义 该 模板 组 件 的 目的 仅 在 于 说 明定 义 方法 。 以 下 是 上 述 代码 的 说 明 。 




















“ template 用 于 声明 标签 ，name 用 于 指定 模板 名 称 ， 该 名 称 将 在 pages/douban/list.wxml 中 使 用 。 





+ enable-back-to-top 属 性 用 于 实现 单 击 标题 栏 回 到 顶部 


“ bindscrolltolower 用 于 绑 定 滑动 到 底部 的 事件 ，loadMorePage 是 一 个 尚未 定义 的 方法 。 模 板 文件 没有 对 应 的 js 文件 ， 稍 后 将 在 pages/douban/list.js 中 定义 这 个 方法 。 

















该 模板 组 件 中 取 用 了 三 个 模板 变量 : movies、page、total。 它 们 将 在 模板 被 调用 时 传 入 。 





在 文档 树 中 打开 pages/douban/list.wxml 文 件 ， 修 改 wxml 标 签 为 : 





<import src="list-template"/> 
<template is="list-template" data="{{ movies,total,page }}"/> 











import 标 签 用 于 引入 模板 文件 ，src 属 性 设置 的 是 相对 地 址 ， 因 为 list-template.wxml 文 件 与 ist.wxml 文 件 位 于 同一 目录 之 下 。 在 小 程序 中 ， 对 于 wxml 文 件 的 引用 ， 都 不 带 扩展 名 。 











在 list-template.wxml 中 ，template 是 定义 标签 ， 在 list.wxml 中 是 实例 化 标签 ，is 指 示 模 板 名 称 ，data 是 一 个 模板 变量 列表 ， 是 在 模板 中 用 到 的 变量 ， 其 中 被 传 入 的 变量 的 顺序 没有 先后 之 
43, “movies, total, page” 与 “total、page、movies” 的 效果 是 一 样 的 。 


26.3 ”加 载 更 多 
本 节 将 实现 向 上 滑动 加 载 更 多 数据 的 功能 。 
实现 加 载 更 多 的 功能 ， 需 要 用 到 loadMorePage 方 法 ， 但 在 模拟 文件 list-template.wxml 中 使 用 的 loadMorePage 方 法 还 没有 被 定义 ， 因 此 在 这 个 方法 中 需要 将 page 加 1， 然 后 再 次 拉 取 分 页 数据 。 


打开 pages/doubamylistjs 文 件 ， 添 加 loadMorePage 函 数 ， 代 码 如 下 : 





loadMorePage () { 
if (this.data.page > this.data.total) return 
this.data.page++ 
this. retrieve () 

} 





按 <Command+B> 组 合 键 (或 <Ctrl+B> 组 合 键 ) 测试 一 下 ， 在 列表 页 滑动 页 面 至 底部 后 继续 向 下 滑动 ， 发 现 并 没有 触发 oadMorePage 函 数 。 这 是 为 什么 呢 ? 


导航 到 列表 页 ， 在 调试 工具 区 打开 Wxml 面 板 ， 单 击 scroll-view 这 一 行 ， 如 图 2-23 所 示 。 











iPhone 6 z wifi X 正在 调试 2 个 页 面 vx | [R | Console Sources Network Storage Wxm » 
v <page> 
v -scroll-view y 
< 返回 正在 上 映 的 电影 -北京 v <view class="weui-panel"> 





v <view class="weui-panel_bd"> 
v <navigator class="weui-media-box weui-media-box 
_appmsg" hover-class="weui-cell_active” url="item?i 
d=11803087"> 
> <view class="weui-media-box_hd weui-media-bo 
x_hd_in- 
appmsg” style="height:inherit;width:60px">... 
</view> 
v <view class="weui-media-box_bd weui-media-bo 
x__bd_in-appmsg"> 
<view class="weui-media-box_title">##F#: ® 
#)</view> 
<view class="weui-media-box_desc">Alien: 
Covenant (2017)</view> 
v <view class="weui-media-box_info'> 
SR: REHM 


</view> 


wx-scroll-view 375px 


图 2-23 


此 时 ， 会 发 现 列表 的 高 度 是 2357px， 这 个 高 度 明显 超出 了 屏幕 。 这 个 高 度 是 无 法 触发 scrolltolower 事 件 的 ， 因 为 无 法 scroll 到 那里 。 再 者 ， 在 2000+ 这 个 高 度 ，scroll-view 右 侧 没有 出 现 滚动 条 ， 这 是 
不 正常 的 。 我 们 猜想 ， 此 时 的 内 容 可 以 滚动 ， 是 因为 page 在 滚动 ， 并 不 是 scroll-view 在 滚动 。 那 么 如 何 验证 这 个 猜想 呢 ? 





打开 pages/douban/list.wxml 文 件 ， 在 import 这 一 行 代码 下 面 随意 添加 一 些 U1， 例如 : 





<view class="weui-loadmore"> rene 
<view class="weui-loadmore tips"> 测 试 滚动 容器 </view> 
</view> 





再 次 测试 ， 向 上 滚动 ， 会 发 现 新 添加 的 测试 UI 会 随 电影 列表 一 直 向 上 滚动 ， 如 图 2-24 所 示 。 





正在 上 映 的 电影 -北京 eee 


测试 滚动 容器 


异形 : RA 
Alien: Covenant (2017) @ 


导演 : RBA MAT 


新 木乃伊 


The Mummy (2017) 4.8) 
导演 : 区 里 克 斯 - 库 兹 受 
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这 说 明 此 时 的 滚动 是 page 级 别 的 滚动 ，scroll-view 没 有 发 挥 作 用 。 








删除 测试 UI， 再 在 文档 树 中 打开 pages/douban/list-template.wxmlI 文 件 ， 在 scroll-view 组 件 的 style 属 性 上 添加 内 联 样 式 ， 代 码 如 下 : 





<scroll-view style="display:inline" enable-back- to-top scroll-y bindscrolltolower="loadMorePage"> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 








scroll-view 默 认 的 display 样 式 是 block， 它 会 让 元 素 显示 为 块 状元 素 ， 这 就 使 得 高 度 将 按 实际 大 小 来 显示 ， 于 是 滚动 失效 。inline 代 表 将 元 素 显示 为 内 联 元 素 ， 于 是 滚动 条 出 现 。 


按 <Command+B> 组 合 键 (或 <Ctrl+B> 组 合 键 ) 刷新 项 目 ， 会 发 现 已 经 可 以 滚动 ， 并 能 触发 加 载 更 多 。 


2.6.4 ”如 何 调试 
到 目前 为 止 ， 已 经 实现 了 向 上 滚动 加 载 更 多 的 效果 。 但 在 测试 中 我 们 会 发 现存 在 如 下 两 个 问题 。 
: 一 直 可 以 触发 加 载 更 多 ， 并 且 最 后 几 页 的 数据 已 经 重复 。 
“继续 滑动 加 载 更 多 ”的 提示 一 直 存 在 。 


通过 console.log 打 印 获取 到 的 数据 如 图 2-25 所 示 。 








31 { 
32 : g 》 
33 let movies = this.data.movies.concat (res.subjects) 
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在 Console 面 板 中 观察 数据 输出 ， 如 图 2-26 所 示 。 











多 次 测试 可 以 发 现 ， 豆 瓣 API 中 返回 的 total 数 据 并 非 指 总 页 数 ， 而 是 指 总 条 目 数 。 


在 文档 树 中 打开 page/douban/list.js 文 件 ， 修 改 retrieve 函 数 ， 如 图 2-27 所 示 。 


这 样 修改 之 后 ， 就 会 先 由 总 条 目 数 和 size 计 算 一 下 总 页 数 ， 然 后 再 调用 setData。Math.floor 对 小 数 点 向 下 取 整 ， 返 回 不 大 于 小 数 的 最 小 整数 。 


再 次 测试 ， 拉 取 重 复数 据 的 问题 就 解决 了 。 


[Kk Console Sources Network Storage » 
© V top 
[Fiter |O Regex C Hide network messages f) Errors Warnings 


¥ Sun Jun 18 2017 22:40:25 GMT+0800 (CST) 配置 中 关闭 WMA. TLS 版 本 以 及 HT 


A 工具 未 校 验 请 求 域名 、TLS 版 本 以 及 HTTPS 证 书 。 


¥ Object {count: 20, start: 9，total: 43, subjects: Array[20], title: "i 
count: 20 
start: 0 


v subjects: Array[20] 


> 0: 
Pi: 
> 2: 
3: 
b4: 
P5: 
b6: 
> 7: 
> 8: 
> 9: 


> 10: 
> 11: 
> 12: 
> 13: 
> 14: 
> 15: 
> 16: 
> 17: 
> 18: 
> 19: 


Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 
Object 


length: 20 


> proto_: Array[@] 
title: "正在 上 了 映 的 电影 -北京 " 


total: 43 


Pp _proto__: Object 


34 
35 


2.6.5 “刷新 视图 


了 [| Preserve log 


图 2-26 


this.setData({ movies: movies, total: total }) 


图 2-27 


但 是 “继续 滑动 加 载 更 多 ”的 提示 仍然 存在 ， 这 是 由 于 绑 定 在 模板 组 件 list-template 上 的 page 变 量 


没有 刷新 。 


代码 如 下 : 





this.data.paget++ 





这 样 的 代码 只 是 递增 page 的 数值 ， 绑 定 在 list 页 面 上 的 page 变 量 并 没有 更 新 。 





将 retrieve 函 数 中 的 这 行 代码 ; 





this.setData({ movies: movies, total: total}) 





修改 为 : 





this.setData({ movies: movies, total: total, page: this.data.page }) 





修改 之 后 ，page 变 量 就 会 及 时 刷新 ，“ 继 续 滑动 加 载 更 多 ”的 提示 也 不 复 存在 。 








setData 在 设置 变量 的 时 候 会 通知 视图 刷新 这 些 变量 。 在 修改 之 前 ， 虽 然 total 被 刷新 了 ， 但 是 留 在 模板 组 件 中 的 page 变 量 一 


























直 是 | 日 的 数值 1， 








所 以 下 面 这 段 代 码 中 的 if 济 断 没有 如 期 发 挥 作 





<view class="weui-loadmore" wx:if="{{total > page} 


<view class="weui-loadmore tips" SAA UMAR & zs </view> 
</view> 





2.6.6 下 载 源码 


在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 | 问题， 可 以 通过 如 下 方式 来 解决 。 
“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ” 


“下载 作者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电 影 2.6” 获 取 下 载 地 址 。 


2.7 ”实现 下 拉 刷 新 功能 


2.7.1 “小 程序 中 的 下 拉 更 新 API 





如 图 2-28 所 示 ， 在 页 面 顶端 下 拉 ， 就 会 自动 刷新 页 面 ， 本 节 将 实现 这 个 功能 


“小 程序 ” 














WeChat e ee 








仁 波 齐 新 木乃伊 
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事实 上 ， 小 程序 本 身 已 经 提供 了 实现 下 拉 更 新 的 AP1。 





在 文档 树 中 打开 pages/douban/index.js 文 件 ， 添 加 一 个 onPullDownRefresh 方 法 ， 代 码 如 下 : 





onPullDownRefresh () { 
this.retrieveData() .then(() => wx.stopPullDown-Refresh () ) 
} 























在 这 里 使 用 箭头 函数 定义 then 方 法 需要 的 匿名 函数 ， 没 有 使 用 花 括号 (将 函数 体 括 起 来 ， 是 因为 代码 只 有 一 行 ， 省 略 了 。 






























































这 里 也 体现 了 使 用 Promise 编 程 的 好 处 ， 因 为 retrieveData 函 数 返回 的 是 一 个 Promise 对 象 ， 所 以 对 它 可 以 进行 then 调 用 。 






































在 onLoad 方 法 中 ， 调 用 retrieveData 之 后 就 不 需要 再 调用 wx.stopPulIDownRefresh 方 法 了 ， 只 有 在 onPullDownRefresh 函 数 中 才 需 要 。onPullDownRefresh 是 小 程序 规定 的 下 拉 函 数 ， 在 Page 中 定 
义 它 就 意味 着 下 拉 更 新 功能 实现 了 一 半 。 
































在 文档 树 中 打开 pages/douban/index.json 文 件 ，json 文 件 是 页 面 的 配置 文件 。 在 花 括号 0 里 输入 “en”， 编 程 器 会 自动 实时 提示 “enablePullDownRefresh”,， 按 <Enter> 键 ,设置 其 值 为 true。 至 
此 ， 下拉 更 新 的 功能 已 全 部 完成 。 














Oas 当下 拉 更 新 时 ， 如 何 显 示 一 个 “加 载 中 ”的 提示 ， 并 在 加 载 完成 后 自动 隐藏 提示 。 本 节 所 附 源码 已 实现 了 这 个 功能 。 


2.7.2 下 载 源码 











在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 
+ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信和 扫描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电 影 2.7” 获 取 下 载 地 址 。 


2.8 ”实现 搜索 功能 











在 首页 单 击 搜索 框 进入 搜索 页 面 ， 输 入 要 搜索 的 关键 词 ， 单 击 “ 搜 索 ” 按 钮 ， 展 示 的 电影 列表 如 图 2-29 所 示 ;， 在 搜索 页 面 ， 提 供 即 时 匹配 关键 字 的 功能 ,如 图 2-30 所 示 。 本 节 将 实现 这 个 功能 。 
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< 返回 WeChat 


Q Ais 





大 话 西 游 之 大 圣 娶 
大 话 西 游 之 月 光宇 
大 话 西游 3 

西游 降魔 篇 

大 花 

恋爱 地 图 
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在 文档 树 中 打开 pages/douban/index.wxml 文 件 ， 在 最 下 面 添加 如 下 代码 : 








<view class="weui-search-bar" style="position: absolute;top:0;width:100%;opacity: .8;"> 
<navigator url="search" class="weui-search-bar__form"> 
<view class="weui-search-bar__box"> = 
<icon class="weui-icon-search in-box" type="search" size="14"></icon> 
<input type="text" class="weui-search-bar input" /> 
</view> ag 
<label class="weui-search-bar label"> 
<icon class="weui-icon-search" type="search" size="14"></icon> 
<view class="weui-search-bar text"> 搜 索 </view> 
</label> = 
</navigator> 
</view> 











IR] 








2-31 所 示 。 





这 部 分 wxml 标 签 代码 ， 在 首页 定义 了 一 个 八 分 透明 的 “ 假 ” 的 搜索 框 ， 效 果 如 


WeChat eee 


A o 
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回 
回 


目前 尚未 定义 ) 。 


iry 


和 E 击 搜索 框 时 ， 会 转 到 search 页 面 (这 个 页 





























在 文档 树 中 打开 app.json， 使 用 2.1.3 节 的 快捷 方法 创建 pages/douban/search 页 面 。 





打开 search.wxmlI 页 面 ， 修 改 wxml 标 签 代码 为 : 





<view class="weui-search-bar"> 
<view class="weui-search-bar form"> 
<view class="weui-search-bar box"> 
<icon class="weui-icon-search in-box" type="search" size="14"></icon> 
"text" class="weui-search-bar input" value= {{searchWords}}" focus="{{searchIinputFocus}}" bindinput="onSearchInputType" [> 





<inp 

<! 的 icon--> 

<view class="weui-icon-clear" wx:if="{{searchWords.length > 0}}" bindtap="clearSearchInput"> 
<icon type="clear" size="14"></icon> 

</view> 


</view> 
<label class="weui-search-bar_ label" hidden="{ {searchInputFocus}}" bindtap="showSearchInput"> 


<icon class="weui-icon-search" type="search" size="14"></icon> 
<view class="weui-search-bar__text">4##</view> 
</label> 


</view> 
<view class="weui-search-bar__cancel-btn" hidden="{ {!searchInputFocus}}" bindtap="onTapSearchBtn"> 


<block wx:if="{{searchWords.length == 0}}"> 取 消 </block> 
<block wx:else> 搜 索 </block> 
</view> 
</view> 
<!-- 即 时 搜索 词 列表 --> 
<view class="weui-cells searchbar-result" wx:if="{{wordsList.length > 0}}"> 
<navigator url tem?id={ {item.id}}" wx:for="{{wordsList}}" wx:key="{{item.id}}" class="weui-cell" hover-class="weui-cell active"> 
<view class="weui-cell_bd"> T 
<view>{{item.title}}</view> 
</view> 
</navigator> 
</view> 








<import src="list-template" /> 
<template is="list-template" data="{{ movies,total,page }}" /> 





打开 pages/douban/search.js 文 件 ， 将 代码 修改 为 : 





Page ({ 
data: { 
searchInputFocus: true, 
searchWords: "", 
wordsList: [], 
size: 20, 
page: 1, 
movies: [], 
requestInternal:-1, 
hr 
onTapSearchBtn() { 
console. log("words", this.data.searchWords) 
if (this.data.searchWords != "") { 
this.retrieve () 
} 
this.setData ({ 
searchInputFocus: false, 


searchWords: 
wordsList: [] 
he 


, 


ty 

retrieve() { 
let app = getApp () 
let start = (this.data.page - 1) * this.data.size 
wx.showLoading({ title: ' 加 载 中 ' }) 


return app.request (“https://api.douban.com/v2/movie/search?g=${this.data.searchWords} &start=$ {start} &count=${this.data.size} >) 


.then (res => { 
console.log ("res", res) 
if (res.subjects.length) { 
let movies = this.data.movies.concat (res.subjects) 
let total = Math.floor(res.total / this.data.size) 


this.setData({ movies: movies, total: total, page: this.data.page,wordsList:[] }) 


wx.setNavigationBarTitle({ title: res.title }) 


}).catch(err => { 
console.error (err) 
}).finally(() => { 
wx. hideLoading () 
3) 
ty 
showSearchInput () { 
this.setData ({ 
searchInputFocus: true 


he 
] 
// 清空 输入 框 内 容 


clearSearchInput() { 
this.setData ({ 
searchWords: 


he 


] 
// 当 在 搜索 框 输入 内 容 
onSearchInputType(e) { 
let app = getApp () 
let words = e.detail.value 
this.setData ({ 
searchWords: words 
he 
clearTimeout (this.data.requestInternal) 
this.data.requestInternal = setTimeout (()=>{ 


app. request (https: //api.douban.com/v2/movie/search?q=$ {words} &start=0&count=6") .then(d => { 


console.log (d) 
if (d.subjects.length) { 
this.setData ({ 
wordsList: d.subjects 
he 














在 上 述 代 码 中 ，searchlnputFocus 控 制 input 组 件 的 焦点 ， 当 

















bindinput 用 于 绑 定 输入 事件 ， 在 onSearchinputType 函 数 中 ， 先 将 输入 的 文本 从 e.detail.value 中 取出 并 保存 。 为 了 避免 在 用 户 尚 未 完成 输入 时 频繁 调 | 



































接口 。 在 下 次 未 调用 之 前 ， 如 果 有 新 的 输入 ， 则 使 用 clearTimeout 清 除 上 一 次 的 间隔 调 有 




















为 true 时 ，input 组 件 自动 聚集 。 


























， 可 使 














© setTimeout () 只 执行 一 次 code。 如 果 要 多 次 调用 ， 请 使 用 setInterval () 或 者 让 code 自 身 再 次 调用 setTimeout () 。 


对 于 下 面 这 段 代 码 : 




















setTimeout 设 置 在 2 秒 之 后 调 














<import src="list-template" /> 
<template is="list-template" data="{{ movies, total,page }}" /> 




















在 开发 中 前 者 可 以 基于 后 者 复制 修改 。 由 于 接口 调用 代码 与 setData 代 码 混合 在 一 起 了 ， 






































单 击 输入 框 表象 Ul 时 ， 触 发 showSearchlnput 函 数 ， 在 这 个 函数 中 仅 设置 焦点 变量 searchlnputFocus 为 true。 
Ah "x" 号 图 标 时 ， 触 发 clearSearchlnput 函 数 ， 设 置 searchWords 为 空 。 当 searchWords 为 空 时 ，“x“” 号 图 标 将 不 再 显示 。 











其 内 容 与 pages/boudan/list.wxml 相 同 ， 表 示 在 这 里 复 用 了 模板 组 件 list-template， 这 就 是 定义 模板 组 件 的 好 处 。search.js 文 件 中 的 retrieve 函 数 与 pages/douban/list.js 文 件 中 的 retrieve 函 数 类 似 ， 
因此 不 适合 进行 进一步 的 拆 分 抽象 。 





<view class="weui-search-bar cancel-btn" hidden="{{!searchIinputFocus}}" bindtap= "onTapSearchBtn"> 


<block wx:if="{{searchWords.length == 0}}"> 取 消 </block> 
<block wx:else> 搜 索 </plock> 
</view> 











以 上 代码 使 用 条 件 绑 定 ， 当 searchWords 的 字符 串 长 度 不 为 零 时 ， 显 示 “ 取 消 ”， 否 则 显示 “搜索 ”。 























这 里 使 用 bindtap 绑 定 onTapSearchBtn 函 数 。 在 onTapSearchBtn 函 数 中 ， 先 清除 搜索 变量 ， 如 果 搜索 词 不 为 空 ， 则 调用 retrieve 函 数 。 











在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 


“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


:下载 作 者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电影 2.8” 获 取 下 载 地 址 


2.9 提交 


本 节 主 要 设置 作品 名 称 和 头像 ， 然 后 配置 服务 器 域名 并 提交 审核 。 





2.9.1 修改 信息 





在 文档 树 中 打开 app.json 文 件 ， 找 到 navi-gationBarTitleText 字 段 ， 将 其 值 修改 为 


豆 豆 电影 ”。 


在 电脑 上 登录 https//mp.weixin.qq.com， 打 开 “ 设 置 ” 一 “基本 设置 ”， 在 这 里 修改 小 程序 名 称 、 小 程序 头像 和 介绍 。 需 要 扫 码 认证 管理 员 ， 即 注册 时 设置 的 微 信 账号 。 

















例如 将 介绍 修改 为 “分 享 最 新 的 电影 资讯 ”后 ， 单 击 “ 确 定 ” 按 钮 ， 提 交 审 核 ， 如 





[ 








2-32 所 示 。 


修改 介绍 


@ 修改 介绍 O 确认 修改 


一 个 月 只 能 申请 5 次 修改 
审核 将 会 在 7 个 工作 日 内 完成 ， 请 确认 是 否 提交 修改 申请 : 


分 享 最 新 的 电影 资讯 

















审核 会 有 一 段 时 间 的 审核 期 ， 一 般 是 在 3 天 之 内 完成 。 由 微 信 之 外 的 公司 负责 审核 ， 审 核 人 员 的 上 班 时 间 是 周一 至 周 五 。 





2.9.2 ”使 用 Sketch 生成 头像 


修改 头像 需要 再 次 验证 管理 员 权限 ， 头 像 的 大 小 最 好 为 144x144 像 素 。 




















到 http://www.sketchcn.com/ 上 下 载 Sketch 软件 。Sketch 软 件 是 一 款 轻 量 、 易 用 的 矢量 图 设计 工具 ， 设 计 Logo、 图 标 比 Photoshop 更 方便 。 






































打开 Sketch 软件 ， 新 建 一 个 Document， 在 菜单 中 选择 Insert 一 Shape 一 Rectangle 命 令 ， 如 图 2-33 所 示 。 
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图 2-33 





然后 新 建 一 个 矩形 ， 在 右边 的 属性 面板 中 设置 宽 、 高 为 144px， 设 置 Fill 颜 色 为 共 f00aa。 


接着 ， 在 菜单 栏 中 选择 Insert 一 Text 命 令 ， 插 入 一 个 文本 “ 豆 豆 电影 ”， 调 整 字 体 、 大 小 、 间 距 和 位 置 ， 如 图 2-34 所 示 。 























将 文本 与 图 形 群 组 ， 在 右边 的 导出 面板 中 ， 按 默认 1 倍 的 大 小 导出 png 图 片 。 




















现在 回 到 小 程序 微 信 后 台 ， 将 新 导出 的 头像 上 传 。 圆 形 头像 是 在 方形 的 基础 上 自动 生成 的 ， 所 以 在 上 面 的 制作 中 ， 需 要 加 一 个 边 距 ， 如 图 2-35 所 示 。 








LRA 
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这 样 就 完成 了 头像 修改 的 操作 。 


2.9.3 ”配置 域名 器 域名 





在 微 信 小 程序 后 台 ， 打 开 “ 设 置 ” 一 “开发 设置 ”， 找 到 “服务 器 域名 ”， 单 击 “ 开 始 配置 ”按钮 ， 在 “request 合 法 域名 ”文本 框 中 填写 “http://api.douban.com”， 如 图 2-36 所 示 。 














然后 ， 单 击 “ 保 存 并 提交 ”按钮 。 





























在 小 程序 代码 中 ， 我 们 仅 调 用 过 api.douban.com 这 一 个 域名 。 在 设置 服务 器 域名 之 后 ， 在 微 信 Web 开 发 者 工具 中 ， 即 可 打开 服务 器 域名 验证 ， 但 此 举 没有 必要 。 


配置 服务 器 信息 x 

















A) 身份 确认 @ 配置 服务 器 信息 


服务 器 域名 需 经 过 ICP 备 案 ， 新 备案 域名 需 24 小 时 后 才 可 配置 。 域 名 格式 只 支持 英文 大 小 写字 母 、 数 字 及 “- "， 不 支 
持 IP 地 址 及 端口 号 。 如 果 没 有 服务 器 与 域名 ， 可 前 往 腾讯 去 购买 与 配置 ， 点 击 前 往 。 


request 合 法 域名 https:// api.douban.com © 
socket 合 法 域名 wss:// © 
uploadFile 合 法 域名 https:// © 
downloadFile 合 法 域名 https:// 中 
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294 在 手机 上 预览 








到 微 信 开 发 者 工具 中 ， 从 左边 工具 栏 中 打开 “项 目 ”， 单 击 “ 预 览 ”按钮 ， 如 图 2-37 所 示 。 








ApplD: wxf92f5dfe1d6a5ad2 


人 


本 地 开发 目录 /work/code/weappzerotoone/code/ 豆 豆 电 影 打开 


最 新 更 新 时 间 AIX 预览 | - 
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打开 小 程序 预览 面板 ， 使 用 管理 员 微 信 扫 码 ， 即 可 在 手机 上 预览 自己 的 作品 。 








在 打开 的 微 信人 小 程序 的 右上 角 菜 单 中 ， 选 择 “打开 调试 ”命令 ， 可 在 右 下 角 开 启 vConsole 面 板 ， 查 看 Console 输 出 ， 如 图 2-38 所 示 。 


bel SX © atl at! 06:22 








个 AZIZ OR ° 





Log System WeChat 


All Log Info Warn Error 
Update view with init data 


pages/douban/index: onLoad have been invoked 
100 

pages/douban/index: onShow have been invoked 
Invoke event onReady in page: pages/douban/index 
pages/douban/index: onReady have been invoked 
pages/douban/index: onHide have been invoked 
App: onHide have been invoked 

App: onShow have been invoked 
pages/douban/index: onShow have been invoked 
pages/douban/index: onHide have been invoked 
App: onHide have been invoked 

App: onShow have been invoked 
pages/douban/index: onShow have been invoked 
pages/douban/index: onHide have been invoked 
App: onHide have been invoked 

App: onShow have been invoked 


pages/douban/index: onShow have been invoked 


command OK 


Clear Hide 














2.9.5 上传 版 本 











在 微 信 开 发 者 工具 中 ， 从 左边 工具 栏 中 打开 “项 目 ”， 单 击 “ 上 传 ” 按 钮 ， 如 图 2-39 所 示 。 


豆 豆 电影 





ApplD: wxf92f5dfe1d6a5ad2 


配置 信息 


本 地 开发 目录 /work/code/weappzerotoone/code/ 豆 豆 电影 打开 


最 新 更 新 时 间 RER 


基础 库 版 本 1.3.0 Bik ~ 




















然后 在 版 本 上 传 操 作 面 板 中 填写 版 本 号 (800.1) ， 单 击 “ 上 传 ”按钮 ， 如 图 2-40 所 示 。 


上 传 确认 


上 传 后 ， 可 以 在 公众 平台 查看 本 版 本 


版 本 号 0.1 


合理 设置 版 本 号 便于 管理 ， 只 能 输入 字母 、 数 字 、. 如 v1.0.0 


项 目 备注 | #7 Z 2017/6/24 上 午 6:16:24 WAL 


人 


可 以 备注 项 目 版 本 优化 内 容 等 ， 便 于 管理 员 识 别 


图 2-40 
ESEA, HERD. 
2.9.6 ”提交 审核 
回 到 微 信 小 程序 后 台 ， 选 择 “ 开 发 管理 ”， 即 可 看 到 上 传 的 版 本 ， 如 图 2-41 所 示 。 
开发 版 本 
0.1 提交 时 间 2017-06-24 06:24:00 


在 2017/6/24 上 午 6:24:21 提交 上 传 








图 2-41 








单 击 “ 提 交 审 核 ” 按 钮 ， 同 意 审核 规则 ， 验 证 管理 员 权 限 ， 打 开 审 核 信息 面板 ， 即 可 得 到 图 2-42 所 示 的 界面 。 





配置 功能 页 面 


功能 页 面 请 选择 
标题 
所 在 服务 类 目 。 请 选择 


添加 功能 页 面 


在 “功能 页 面 " 选择 “pages/doubamindex”， 在 “标题 “ 


在 审核 信息 的 填写 面板 中 ， 可 以 单 击 “ 添 加 功能 页 面 ”， 





审核 是 由 微 信之 外 的 第 三 方 团队 来 负责 的 ,一般 1~3 天 便 可 忆 


审核 信息 
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文本 框 中 输入 “最 新 电影 ”， 选 择 所 在 类 








， 在 “标签 ”文本 框 中 输入 “电影 ” 











添加 其 他 页 面 的 描述 。 





F 核 通过 。 


， 然 后 按 <Enter> 键 ， 单 击 “ 提 交 审 核 ”按钮 。 


Os 电影 属于 文娱 -资讯 类 别 ， 截 至 本 书写 作 之 时 ， 这 一 类 别 尚未 对 个 人 小 程序 账号 开放 ， 不 会 通过 审核 。 微 信 小 程序 的 类 别 审核 不 是 以 开发 者 提交 的 类 别 为 准 ， 而 是 以 审核 人 员 通 过 名 称 、 简 


介 、 内 容 判断 的 类 别 为 准 。 


2.9.7 “下载 源码 


在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 


“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


:下载 作 者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电 时 


第 3 章 ， 计算 皮 相 


02.9” 获取 下 载 地 址 。 








本 章 将 实现 一 个 简单 的 标准 计算 器 ， 这 个 计算 器 称 为 “计算 皮 相 ”， 








机 来 完成 的 。 





因为 它 本 身 并 不 像 真正 的 计算 器 那样 具有 计算 的 功能 ， 只 是 提供 了 一 个 输入 界面 (如 








计算 皮 相 














3-1 所 示 ) ， 真 正 的 计算 其 实 是 由 计算 机 或 手 


1ARRAR7 











可 用 微 信 扫描 图 3-2 所 示 的 小 程序 码 ， 在 线 体验 。 























按照 1.1 节 介绍 的 方法 ， 前 往 https//mp.weixin.qq.com 注 册 一 个 全 新 的 小 程序 账号 ， 将 其 名 称 修改 为 “计算 皮 相 ”， 将 介绍 修改 为 “一 个 可 以 在 群 内 分 享 的 简约 计算 器 ”， 然 后 将 服务 类 目 修改 为 “ 工 
具 ” 一 “效率 ”。 最 后 使 用 2.9.2 节 的 方法 ， 制 作 一 个 图 3-3 所 示 的 图 像 ， 将 其 作为 “计算 皮 相 ”的 头像 。 




















3.1 


使 用 模板 创建 项 目 


打开 微 信 开 发 者 工 























， 新 建 项 目 ， 在 “项 目 目录 ”中 选择 一 个 空 目 录 ， 并 且 


图 3-3 





反选 “在 当前 目录 中 创建 quick start 项 目 ”， 如 

















3-4 所 示 。 


KEE) 微 信 web 开 发 者 工具 v0.18.182200 
< 返回 
添加 项 目 


AppID  wxa7cec365b9bc44ca 


填写 小 程序 ApplD 无 ApplD 


项 目 名 称 HARE 


TREE /work/code/weappzerotoone/codenew/ 计 算 皮 相 选择 


门 在 当前 目录 中 创建 quick start 项 目 


取消 





图 3-4 


不 过 ， 空 项 目 并 不 会 创建 任何 文件 。 























之 后 ， 参 照 2.1.4 节 的 方法 ， 下 载 simjs 源 码 ， 并 将 之 放 在 “计算 皮 相 ”项 目的 根 目录 之 下 ， 将 sim.js/template 目 录 下 的 所 有 文件 、 目 录 移 至 “计算 皮 相 ”的 根 目录 下 。template 是 引用 sim.js 类 库 的 默 
认 结 构 ， 直 接 复制 过 来 可 免 去 手动 创建 的 麻烦 ， 同 时 也 不 必 创 建 quick start 项 目 中 其 他 多 余 的 文件 。 














3.3 ”实现 index 主 页 
































pages/index/index 页 面 将 放置 计算 器 按钮 ， 并 在 逻辑 层 完 成 主要 的 计算 逻辑 ， 然 后 在 视 | 
将 主要 完成 这 些 功 能 。 
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泻 染 展示 。 每 次 完成 计算 之 后 ， 都 需要 将 记录 存 进 本 地 缓存 ， 以 便 在 pages/index/history 页 面 取 用 。 本 节 






































在 文档 树 中 打开 pagesindex/index.wxml 文 件 ， 将 其 中 的 内 容 蔡 换 为 如 下 标签 代码 : 





<view style="background-color: #d8d8d8; height :100%;"> 
<view style="text-align:right;width: 100%; padding: 10rpx; font-weight :bold; font-size: 50rpx;box-sizing:border-box;border-top:lpx solid #eee;border-top:1px solid #eee;height:20C 
{{screenData} } 
</view> 
<view bindtap="tapSymbolBtn" style="width: 100%; color: #fff;"> 
<view class="row"> 
<view class="orange" data-symbol="clear">C</view> 
<view class="orange" data-symbol="back"></view> 
<view class="orange" data-symbol="toggle">+ /—</view> 
<view class="orange" data-symbol="+">+</view> 
</view> 
<view class="row"> 












<view class="blue" data-symbo. ">9</view> 
<view class="blue" data-symbo. >8</view> 
<view class="blue" data-symbol="7">7</view> 





<view class="orange" data-symbol= 
</view> 
<view class="row"> 
<view class="blue" data-symbol="6 
<view class="blue" data-symbol=' 
<view class="blue" data-symbol=' 
<view class="orange" data-symbol="*">x</view> 
</view> 
<view class="row"> 
<view class="blue" data-symbol=' 
<view class="blue" data-symbol=' 
<view class="blue" data-symbol=' 
<view class="orange" data-symbol= 
</view> 
<view class="row"> 
<navigator url="history" class="blue"> 
<icon type="waiting circle" color="white" size="25" /> 
</navigator> i 










">0</view> 
.</view> 
">=</view> 


<view class="blue" data-symbol=' 
<view class="blue" data-symbol=' 
<view class="orange" data-symbol= 
</view> 
</view> 
</view> 























该 文件 将 用 于 构建 计算 器 的 Ul， 如 图 3-6 所 示 。 
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图 3-6 


在 上 述 代码 中 ，screenData 用 于 绑 定 计算 结果 ， 由 于 计算 结果 可 能 过 长 ， 所 以 使 用 了 自动 换行 的 内 庶 样 式 ， 代 码 如 下 : 





word-wrap:break-word; word-break:normal; 





33.1 Beat 








FERIA HAIR, bindtap="tapSymbolBtn" AF tap +AE]tapSymbolBtněkškh., feAbindstHENStRAS wet, BASED viewRsct, (ARAAATBAblueak 


orange 按 钮 的 单 击 事件 都 会 触发 tapSymbolBtn 函 数 。 


在 标签 定义 中 ，view 基 本 上 是 万 能 UI 组 件 。 这 个 计算 器 表象 也 是 以 view 钨 套 定义 的 。 class 用 于 指定 组 件 的 样式 名 ， 这 与 html 标 签 一 致 。 而 row、blue、orange 这 些 则 都 是 在 pagesindex/index.wxss 


中 定义 的 样式 。 


icon 是 图 标 组 件 ， 有 效 的 type 属 性 值 包括 success、info、warn、waiting、cancel、download、search、clear 等 。 这 些 type 名 称 可 以 与 “no_circle” 或 “circle” 相 结合 组 合成 新 的 type。 官 方 文 
档 并 没有 详细 列举 每 一 个 有 效 的 组 合 type 值 ， 并 不 是 每 一 个 组 合 都 是 有 效 的 ， 具 体 以 实践 测试 为 准 。 








“data-symbol” 用 于 在 组 件 上 定义 一 个 名 为 “symbol” 的 自 定义 属性 ， 使 用 自 定义 属性 ， 可 以 将 视图 层 的 数据 传 至 代码 层 。 在 事件 函数 中 ， 可 以 使 用 event'target.dataset 取 得 事件 源 组 件 上 定义 的 














所 有 自 定义 属性 的 集合 。 








最 后 ， 因 为 history 页面 与 index 页 面 同 级 ， 位 于 同一 目录 之 下 ， 所 以 这 里 的 navigator 组 件 ， 其 url 属 性 可 以 简写 为 “history”， 也 就 是 阅 ， 使 用 的 是 相对 地 址 。 


3.3.2 ”样式 选择 器 


在 文档 树 中 打开 pages/index/index.wxss 文 件 ， 添 加 如 下 样式 声明 : 





.row { 
display: flex; 
flex-direction: row; 
flex: 1; 
width: 100%; 
height: 185rpx; 
background-color: #eee; 
} 
.row View, .row navigator { 
width:25%; 
display: flex; 
align-items: center; 
flex-direction: column; 


justify-content: center; 


margin-top: 1px; 
margin-right: 1px; 
} 


‘row view:active { 


background-color: #££0000; 


} 
.orange { 
background: #£77d11; 
} 
-blue { 


background-color: #0099cc; 


} 





其 中 ， 样 式 声明 “.row view: active’ A 


.row 是 类 选择 器 名 称 ， 用 在 组 件 的 class 属 性 中 。 

















“row view” 代 表 class 


置 class 属 性 的 麻烦 。“.row navigator” 样 式 声明 与 此 同 理 。 


于 单 击 按钮 时 的 样式 。 单 击 计算 器 按钮 时 ， 其 背景 高 亮 反 红 就 是 由 这 个 样式 来 实现 的 。 


属性 ， 可 针对 .row 内 部 的 view 组 件 定义 它们 应 该 具备 的 样式 。view 是 元 素 选择 器 。 在 wxss 中 使 用 元 素 选择 器 ， 可 以 免 去 多 次 设 


在 两 个 样式 声明 中 间 加 “，” ， 代 表 并 列 ， 具 有 相同 的 样式 ， 如“.row view, .row navigator” . 


wxss 文 件 是 样式 文件 。 在 小 程序 中 有 两 种 样式 文件 ， 一 种 是 全 局 的 app.wxss， 位 于 根 目 录 之 下 ; 另 一 种 页 面 的 样式 文件 ， 与 wxml 文 件 同名 并 且 位 于 同一 目录 下 。 


3.3.3 ”实现 计算 的 逻辑 


在 文档 树 中 打开 pages/index/index.js 文 件 ， 将 页 面 初始 数据 data 蔡 换 为 : 





data: { 
screenData: "0" 


, 
lastIsOptSymbol: false, 


are: [ls 
logs: [] 





在 上 述 代 码 中 ，screenData 用 于 记录 输入 和 计算 的 结果 。lastlsOptSymbol 代 表 上 一 次 用 户 输入 的 字符 是 不 是 一 个 操作 符 。arr 是 记录 的 输入 队列 ， 真 正 的 计算 依赖 于 它 。logs 是 计算 素材 与 结果 的 历史 
记录 ， 与 pages/index/historyjs 中 的 logs 其 数据 是 相同 的 。 


然后 ， 在 pages/index/index.js 文 件 中 依次 添加 如 下 函数 : 





// 设置 屏 显 文本 ， 如 果 没 有 文本 或 文本 无 效 ， 则 默认 显示 "07 


setScreenData(data) { 





if (data ™ || data == "—") { 
data = 0; 

} 

this.setData({ "screenData": data }); 


] 
// 退 格 操作 
backOperation() { 
if (this.data.arr.length == 0) { 
return 
} 
this.data.arr.pop(); 
var data = this.data.screenData; 
data = data.substring(0, data.length - 1); 
this.setScreenData (data) 
] 
// 正 负 号 操作 





minusOperation() { 
if (this.data.arr.length == 0) { 
return 


var data = this.data.screenData; 
var firstChar = data.charAt (0); 
// 反 转 正 、 负 号 
if (firstChar { 
data = data.substr (1); 
// 首 位 抽出 
this.data.arr.shift (); 
} else { 
data = 
// 首 位 推 入 
this.data.arr.unshift ("—"); 











} 
this.setScreenData (data) 


] 
// 等 于 操作 


equalOperation() { 
if (this.data.arr.length == 0) { 
return 


} 
var data = this.data.screenData; 
// 判断 最 后 一 个 字符 ， 如 果 不 是 数字 ， 则 返回 
Var lastChar = data.charAt (data.length - 1); 
if (isNaN(lastChar)) { 
return; 


var num = 
var lastOperator = 
var arr = this.data.arr; 
var optarr = []; 


for (var iin arr) { 

if (isNaN(arr[i]) == false || arr[i] == "." || arr[i] == "toggle") { 
// 如 果 是 数字 ， 或 者 \“.“、\-“， 则 累加 进 num 字 符 串 
num += arr[i]; 

} else { 
// RFE- 
lastOperator = arr[i]; 
// 先 推 入 数字 
optarr.push (num) ; 
// 再 推 入 操作 符 
optarr.push (arr[i]); 
// 清空 num 字符 囊 ， 在 下 次 循环 中 使 用 


num = ""; 














} 
if (num) { 

optarr.push (Number (num) ) 
} 


var result = Number (optarr[0]) 
// console. log (result); 
for (var i = 1; i < optarr.length; i =i + 2) { 
if (optarr[i] == "+") { 
// 加 
result += Number(optarr[i + 1]); 


} else if (optarr[i] == ki 


// 减 

result -= Number (optarr[i + 1]); 
} else if (optarr[i] == "*") { 

// R 


result *= Number (optarr[i + 1]); 
} else if (optarr[i] == "=") { 
// 除 
result /= Number(optarr[i + 1]); 
} 
} Siia 
// 存储 历史 记录 
this.data.logs.push(data + "=" + result); 
wx.setStorageSync("calclogs", this.data.logs) ; 


// 将 本 次 计算 结果 存储 进 arr 数 组 ， 以 备 下 次 计算 
this.data.arr.length = 0; 
this.data.arr.push (result); 


this.setScreenData (result + "") 


ty 
numAndOtherOperation (symbol) { 








const numOperateSymbols = { "+": "+", Ha NR attic Ile yl) 
if (numOperateSymbols [symbol] ) { // WIRE Era 

// 如 果 上 次 输入 了 运算 符号 ， 则 返回 ， 避 免 重 复 单 击 运算 符号 

if (this.data.lastIsOptSymbol || this.data.screenData == 0) { 


return; 
} 
} 


var sd = this.data.screenData; 





var data; 
if (sd 0). 4 
data = symbol; 


} else { 
data = sd + symbol; 
} 


this.data.arr.push (symbol); 
this.setScreenData (data) 


this.data.lastIsOptSymbol = numOperateSymbols [symbol] 
hy 
tapSymbolBtn(e) { 
var symbol = e.target.dataset.symbol; 
if (undefined == symbol) { 
return 


} 
switch (symbol) { 
case "back": 
/ BK 
this .backOperation () 
break 
case "clear": 
// 清 屏 
this .setScreenData("") 
this.data.arr.length = 0; 
break 
case "toggle": 
// 正 负 号 +/- 
this.minusOperation () 
break 





case "="; 
// 等 于 = 
this .equalOperation () 
break 
default: 
this.numAndotherOperation (symbol) 





下 面 就 来 针对 代码 里 的 几 个 关键 字 进 行 说 明 。 





(1) js 关键 字 undefined 























tapSymbolBtn 是 在 index.wxml 文 件 中 绑 定 的 tap 事 件 函 数 。e.target.dataset.symbol 用 于 获取 自 定 义 属性 data-symbol。 并 不 是 所 有 按钮 都 自 定 义 了 该 属性 ， 所 以 将 它 的 值 与 undefined 进 行 比 对 ， 如 
果 未 定义 ， 则 返回 ， 代 码 如 下 : 




















if (undefined == symbol) { 
return 


} 





undefined 是 js 保留 的 关键 字 ， 代 表 变量 指向 了 不 存在 的 地 址 。 























计算 器 主要 有 五 类 操作 ， 即 退 格 、 清 屏 、 正 负 号 切换 、 等 于 计算 、 数 字 输 入 及 其 他 操作 。 每 一 种 操作 除了 清 屏 之 外 ， 均 对 应 于 一 个 独立 的 分 支 函 数 ， 这 样 比较 便于 代码 的 阅读 和 维护 。 



































在 清 屏 代码 中 ，“this.data.arr.length=0” 这 行 代码 通过 将 length 设 置 为 0 来 将 数组 arr 清 空 ， 这 种 方式 与 “this.data.arr=[]” 等 效 ， 前 者 不 用 新 建 对 象 ， 效 率 比 后 者 略 高 ， 是 社区 推荐 的 非 标准 方法 。 











(2) js 函数 chatAt 


= 




















在 函数 minusOperation 中 ， 先 使 用 “this.data.arrlength= =0” 判 断 是 否 有 数字 和 输入， 如果 没有 ， 则 直接 返回 。 








data.charAt (0) 用 于 提取 字符 串 data 的 首位 字符 。 









































data.substr (1) 用 于 从 位 置 1 截断 字符 串 并 返回 。substr 与 substring 实 现 了 相同 的 功能 ， 只 是 参数 不 同 。 

















(3) js 函数 shift、unshift 











this.data.arr.shift () 用 于 从 数组 arr 的 首位 抽出 一 个 元 素 ， 而 this.data.arr.unshift ("-") 则 是 向 数组 arr 推 入 一 个 字符 “-”。 














(4) js 函数 substring、substr 


setScreenData 函 数 用 于 调用 setData 设 置 screenData 变 量 ， 并 在 设置 之 前 进行 相关 的 有 效 性 检查 或 预 设 。 因 为 要 多 次 使 用 这 个 逻辑 ， 所 以 


















































被 抽象 抽取 为 一 个 独立 的 函数 。 

















backOperation 函 数 的 逻辑 相对 简单 。this.data.arr.pop () 用 于 将 数组 arr 的 顶端 ， 即 最 后 一 个 推 入 的 元 素 抛弃 。 




















data.substring (0, data.length-1) 用 于 截取 出 最 后 一 个 字符 的 所 有 字符 。 它 与 substr 的 不 同 之 处 在 于 ，substring 接 受 的 参数 是 起 始 位 置 ，substr 则 是 开始 位 置 和 长 度 。 


(5) js 函数 jsNaN 














equalOperation 是 相对 比较 复杂 的 函数 。isNaN (lastChar) 用 于 判断 lastChat 是 不 是 非 数 字 ， 如 果 是 ， 则 返回 。 


























接 下 来 使 用 一 个 for 循 环 ， 将 数组 arr 中 的 元 素 分 组 存 入 数组 optarr 中 ， 并 将 相 临 的 数字 及 小 数 点 归 在 一 起 作为 一 个 元 素 ， 而 把 操作 符 诸如 “+-*” 等 作为 一 个 元 素 ， 为 进行 下 一 步 操作 做 准备 。 





Orr 如 果 在 PC 浏览 器 中 ， 对 于 这 样 的 一 个 字符 串 算 式 “12+3-5”， 可 以 直接 用 eval 函 数 计算 结果 ， 但 在 小 程序 中 是 不 可 以 的 。 原 因 在 于 eval 函 数 的 宿主 是 window 对 象 ， 而 小 程序 没有 window 对 象 ， 
也 就 没有 eval 函 数 。 


代码 Number (optarr[0]) 可 将 整 型 数字 转换 为 小 数 ，String (result) 可 将 数字 转换 为 字符 捉 。 


3.3.4 ”使 用 wx.setStorageSync 接 口 




















代码 wx.setStorageSync ("calclogs"，this.data.logs) 用 于 将 最 新 的 logs 数 组 同步 存 入 本 地 缓存 中 ， 以 便 在 pages/index/historyjs 中 取 用 。 

















在 函数 numAndOtherOperation 中 ， 下 面 这 行 代码 : 





const numOperateSymbols = { "+": "+", "="; "=", "x"; "an, mem, wy omy n,n } 

















定义 了 一 个 numOperateSymbols 常 量 ， 该 常量 是 一 个 集合 对 象 。 由 于 部 分 键 值 对 名 称 与 值 不 同 ， 所 以 采用 集合 对 象 ， 而 不 用 数组 。 




















3.3.5 下 载 源码 


在 本 节 学 习 的 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 
+ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作者 的 源码 ， 对 照 查找 问题 。 在 公众 号 发 送 “ 计 算 皮 相 3.3” 获 取 下 载 地 址 。 


3.4 ”服务 类 目 























若 将 上 面 的 小 程序 内 容 按 2.9.6 节 的 方法 提交 审核 ，1 ~ 3 天 后 会 收 到 微 信 公 众 平台 的 反馈 ， 审 核 失败 。 原 因 是 在 3.1 节 我 们 选择 的 服务 类 目 为 “工具 -效率 ”， 微 信 建 议 的 类 目 为 “工具 -计算 类 ” 。 





见 微 信 小 程序 审核 规则 第 2.1 条 : 





小 程序 的 类 目 要 和 自身 所 提供 的 服务 一 致 


1) 小 程序 服务 类 目 所 对 应 的 页 面 中 的 核心 内 容 必 须 与 该 类 目 一 致 。 


2) 必须 保证 用 户 在 该 页 面 能 够 使 用 该 服务 类 目 ， 不 得 隐藏 ， 不 得 进行 多 次 跳 转 。 





关于 小 程序 的 介绍 也 要 如 实 、 详 尽 地 描述 小 程序 的 功能 ， 否 则 审核 不 通过 。 例 如 这 个 小 程序 ， 如 果 将 介绍 笼统 地 写成 “生活 小 工具 ”， 则 不 被 通过 。 


3.5 发 布 


如 果 小 程序 符合 微 信 的 审核 规范 ， 则 在 1 ~ 3 天 内 会 在 管理 员 微 信 上 收 到 审核 通过 的 通知 ， 如 图 3-7 所 示 。 





代码 发 布 审核 结果 


你 的 小 程序 “计算 皮 相 ”代码 发 布 已 通过 审核 。 
提交 时 间 : 2017-07-03 15:22:04 

提交 版 本 : 0.1.1 

审核 时 间 : 2017-07-03 16:32:03 


图 3-7 





这 时 ， 使 用 小 程序 账号 登录 微 信 小 程序 后 台 ， 打 开 “ 开 发 管理 ”， 单 击 “ 提 交 发 布 ”按钮 发 布 版 本 ， 如 图 3-8 所 示 。 


审核 版 本 





版 本 号 开发 者 
0.1.1 提交 审核 时 间 2017-07-03 15:22:00 


审核 通过 ， 待 发 布 
fiz 在 2017/7/3 下 午 3:21:14 提交 上 传 


图 3-8 


发 布 之 后 ， 在 “设置 ”一 “基本 设置 ”页 面 ， 下 载 小 程序 码 。 本 章 示 例 的 小 程序 码 如 图 3-9 所 示 。 








3.6 RIGS 


在 文档 树 中 打开 pages/index/index.js 文 件 ， 在 data 数 据 下 方 添加 onShareApp-Message 函 数 ， 代 码 如 下 所 示 : 








onShareAppMessage (res) { 
return 
title: ' 可 以 分 享 计算 结果 的 简约 计算 器 '， 
path: '/pages/index/index', 
$ 
} 





title 是 分 享 标题 ，path 是 分 享 路 径 。 普 通 的 网 页 分 享 不 带 状态 ， 小 程序 的 分 享 则 是 带 状态 的 ， 所 以 本 示例 的 标题 是 “可 以 分 享 计算 结果 的 简约 计算 器 ”。 





微 信 规 定 ，Page 内 名 为 onShareAppMessage 的 函数 用 于 转发 消息 ， 只 有 定义 了 该 函数 ， 小 程序 右上 角 的 菜单 才 会 出 现 分 享 按钮 ， 如 图 3-10 所 示 。 




















图 3-10 








添加 分 享 之 后 ， 需 要 重新 上 传 版 本 、 提 交 审 核 。 























本 章 将 实现 一 个 简单 的 天 气 小 程序 一 一 黑 黑 天 气 (如 图 4-1 所 示 ) 。 用 户 可 通过 调用 公共 AP 接口， 查询 所 在 城市 的 天 气 状况 。 


黑 黑 天 气 eee 


















































星期 四 北京 





<= 7VJ LL <7 y <= 7II/~N 3 


vi j 
一 = 
e ‘ 


BB 阴 阴 
25°C-36°C | 24°C-33°C — 23°C-31°C | 24 


图 4-1 


前 往 https//mp.weixin.qq.com， 按 照 1.1 节 的 方法 ， 注 册 小 程序 账号 。 将 名 称 修改 为 “ 黑 黑 天 气 ”， 将 介绍 修改 为 “简单 个 性 天 气 小 工具 ”。 然后 按照 2.9.2 节 的 方法 ， 制 作 图 4-2 所 示 的 头像 ， 并 进行 
修改 。 





图 4-2 























打开 微 信 开 发 者 工具 ,按照 3.1 节 的 方法 ， 基 于 sim.js 项 目 模板 ,创建 初始 项 目 。 






































要 实现 pages/index/index 页 面 的 视图 层 ， 为 了 使 小 程序 在 不 同 设备 上 能 有 相同 的 UI 效果 ， 这 里 使 用 了 响应 式 设计 单位 rpx。 




















4.1.1 关于 rpx 





rpx 是 微 信 小 程序 中 css 的 尺寸 单位 ， 可 以 根据 屏幕 宽度 进行 自 适应 。 





在 文档 树 中 打开 pages/index/index.wxml， 将 内 容 蔡 换 为 以 下 代码 : 


<!--pages/index/index.wxml--> 
<view class="container"> 
<view style="box-sizing: border-box;padding:10px;background-repeat: no-repeat;background-size: 100% 100%;background-image: url ('/static/image/background/ { {weather .today. tyg 
<view class="weui-flex"> 
<view class="weui-flex_ item" style="font-size:50rpx;color:#fff;">{{ weather. today .wendu} }</view> 
<view class="center"><image style="width: 50rpx; height :50rpx;"_ bindtap="loadWeather" src="/static/image/refesh.png"></image> </view> 
</view> 


<view class="weui-flex item center"> 
<view class="weui-grid" style="width: auto;border-style: none;"> 
<image style="width: 320rpx;height: 280rpx;" src="/static/image/white/ { {weather .today.type}}.png"></image> 
<view class="weui-grid_label" style="color:#fff; font-size: 40rpx;">{ {weather.today.type} }</view> 
</view> 
</view> 








<view class="weui-flex" style="display: flex;align-items: center"> 
<view style="font-size:120rpx" class="weui-flex_item"> 
{ {weather .wendu} }°C 
</view> 
<view style="text-align: center" class="weui-flex_item"> 
{{weather.today.week}} {{weather.city}} al 
</view> 
</view> 
</view> 
<!-- 未 来 天 气 列表 -> 
<view style="background: #fff;position: absolute;bottom: 0;width:750rpx; height: 480rpx;"> 
<scroll-view scroll-x style="white-space:nowrap; height : 100%; "> 
<view wx:for="{{weather.futureList}}" wx:key="*this" style="width: 30%; height:100%; display: inline-block;border-right:2rpx solid #edebe9; color: #bbb;"> 
<view class="center" style="height: 25%;font-size: 45rpx;"> {{item.week} }</view> 
<view class="center" style="height: 40%"> 
<image style="width: 120rpx;height: 120rpx;opacity: 0.5;" src="/static/image/black/{{item.type}}.png"></image> 
</view> 
<view style="text-align: center;height: 10%;">{{item. type} }</view> 
<view class="center" style="height: 25%;font-size: 30rpx;"> {{item.wendu} }</view> 
</view> 
</scroll-view> 
</view> 
</view> 











以 “weui-” 开 头 的 样式 ， 如 “weui-flex”， 是 weui 类 库 定义 的 通用 样式 ， 它 们 位 于 sim.js/weui 目 录 之 下 。 除 了 weui 样 式 之 外 ，pages/index/index 页 面 没有 自 定义 的 通用 样式 ， 所 有 样式 均 以 内 联 的 
方式 直接 写 在 了 style 属 性 之 上 。 这 样 调试 改动 起 来 就 比较 方便 ， 只 有 在 多 处 或 多 个 页 面 使 用 的 样式 ， 才 需要 抽 离 出 来 在 wxss 文 件 中 定义 。 






























































在 第 二 个 view 组 件 的 style 属 性 中 ， 有 如 下 样式 : 





width: 750rpx; 




















其 中 ，750rpx 代 表 与 屏幕 等 宽 。rpx 是 responsive pixel 的 缩写 ， 它 是 可 以 根据 屏幕 大 小 进行 自 适应 调整 的 像素 单位 。 小 程序 规定 ， 屏 幕 宽度 为 750。 









































在 小 程序 开发 中 ， 默 认 使 用 iPhone 6 模拟 器 ， 如 




















4-3 所 示 。iPhone6 的 屏幕 宽度 为 375px， 共 有 750 个 物理 像素 ， 则 750rpx=375px=750 物 理 像素 ，1rpx=0.5px=1 物 理 像 素 。 





l 





D iPhone 6 = wifi 


320 X 568 ; Dpr: 2 
iPhone 5 


375 X 667 ; Dpr: 2 
编辑 iPhone 6 


414 X 736; Dpr: 3 
iPhone 6 Plus 


375 X 667 ; Dpr: 2 
iPhone 7 





414 X 736 ; Dpr: 3 
iPhone 7 Plus 


项 目 


360 X 640 ; Dpr: 3 
Nexus 5 


411 X 731 ; Dpr: 2.625 
Ry Nexus 5x 


412 X 732 ; Dpr: 3.5 
Nexus 6 


图 4-3 























使 用 iPhone 6 模拟 器 有 如 下 好 处 : 一 是 分 辨 率 相对 较 高 ， 可 以 保证 视图 在 较 小 的 屏幕 尺寸 上 也 能 保持 清晰 ; 二 是 iPhone 6 的 屏 帘 为 375px， 恰 好 1px=2rpx， 这 样 在 调试 样式 时 容易 进行 单位 换算 。 

















除非 有 特殊 需求 ， 小 程序 开发 中 均 应 使 用 rpx 作 为 默认 的 长 度 单位 。 











4.1.2 ”绝对 定位 























在 展示 天 气 状况 时 ， 用 于 实现 未 来 天 气 列表 的 容器 有 一 个 固定 的 高 度 480rpx， 而 上 面 其 余 的 UI 可 随 屏 幕 高 度 自动 伸缩 。 所 以 ， 未 来 天 气 列表 的 容器 使 



































的 样式 如 下 : 








position: absolute;bottom: 0;height: 480rpx; 








其 中 ，height 定 义 的 高 度 为 480rpx，position 将 定位 属性 设置 为 absolute， 意 即 相 对 于 父 容器 进行 绝对 定位 。bottom 指 定 距离 父 容器 底部 为 0。 








Bus CSS 知 识 点 


position 属 性 有 两 个 表示 绝对 定位 的 值 ， 一 为 absolute， 在 上 面 已 经 用 到 了 ; 一 为 static。 不 同 之 处 在 于 ， 前 者 是 相对 于 父 容 器 的 绝对 定位 ， 后 者 是 相对 于 浏览 器 或 屏幕 窗口 的 绝对 定位 。 











第 二 个 view 容 器 用 于 实现 随手 机 屏幕 自动 伸缩 的 样式 ， 代 码 如 下 : 








position:absolute; bottom: 480rpx; top:0 








其 中 ，bottom 设 置 为 480rpx， 愉 是 未 来 天 气 列表 容器 的 高 度 ; top 等 于 0， 代 表 与 屏幕 顶端 对 齐 。 


这 样 就 实现 了 绝对 定位 。 


42 ”如何 使 用 weui 














weui-flex 样 式 是 weui 类 库 定 义 的 样式 ， 是 一 个 横向 满 屏 的 容器 ， 它 与 子 样式 weui-flex_item 结 合 可 以 实现 横向 平均 分 布 的 布局 ， 如 图 4-4 所 示 。 

















WeUl 


Wel 是 一 套 同 微 信 原 生 视觉 体验 一 致 的 基础 样 
式 库 ， 由 徽 信 官方 设计 团队 为 微 信 内 网 页 和 微 信 
小 程序 量 身 设计 ， 令 用 户 的 使 用 感知 更 加 统一 。 





图 4-5 

















在 chrome 浏 览 器 中 打开 https://weui.io， 然 后 打开 开发 者 工具 ， 并 切换 至 手机 模式 ， 可 以 看 到 weui 类 库 定义 的 所 有 样式 ， 如 图 4-5 所 示 。 





在 sim.js 类 库 中 嵌入 的 weui 是 基于 Web weui 改 写 的 wxss weui, 项目 地址 是 https://github.com/weui/weui-wxss。wxss Weui 与 Web weui 实 现 了 相同 的 视觉 效果 ， 在 浏览 器 上 查 
看 https://weui.io， 类 似 于 在 手机 上 查看 “WeUI1 for 小 程序 ”。 


扫描 下 方 二 维 码 ， 可 以 体验 微 信 官 方 的 wxss weui 组 件 小 程序 : 





官方 小 程序 示例 相 比 于 weui.io 多 了 媒体 组 件 、 地 图 、 







































































基于 wxss weui 可 以 帮助 初学 者 快速 建立 小 程序 的 UI， 遇 到 weui 样 式 不 能 ; 














style, 


<view class="weui-grid" style="width: auto;border- style; none; 
<image style" "width: 320rpx;height: 280rpx; id 





属性 改写 样式 即 可 ， 示 例 代码 如 下 : 


src=" "/atatic/image/white/ (( {weather.today.type}}.png"></image> 
_<view class="weui-grid_ label" style= "color:#fff; font-size: 40rpx;"> {{weather.today.type}}</view> 
































司 像 ， 下 方 是 一 个 文本 并 




















































































































于 weui-grid 具 有 边框 ， 因 此 这 里 使 用 了 “border-style: none” ZAK. 











微 信 web 开 发 者 工具 v0.18.182200 
[x Console Sources Network Storage Wxml » 


v<view class="container"> 
v<view style="background-repeat: no-repeat;background-si 
ze: 100% 100%;background-image: url('/static/image/backgrou 
nd/.jpg');width:375px; position:absolute;bottom:240px;top:0;p 
adding:10px;color:#fff;"> 
v<view class="weui-flex"> 
view class- weui-flex_item style- font-size:25px; 
color:#fff; view 
<image src="/static/image/refesh.png" style="width:2 
5px;height:25px;"></image> 
</view> 
v<view class="weui-flex_item center'> 
v<view class="weui-grid" style="width: auto;border-st 
yle: none;"> 
<image src="/static/image/white/.png" style="widt 
h: 160px;height: 140px;"></image> 
<view class="weui-grid_label" style="color:#fff;fon 
t-size: 20px;"></view> 
</view> 
</view> 
> <view class="weui-flex" style="display: flex;align-items: 
center">...</view> 
</view> 
> <view style="background: #fff;position: absolute;bottom: 
O;width:375px;height: 240px;">...</view> 
</view> 
</page> 





图 4-6 











此 时 在 模拟 器 上 点 中 任何 视图 元 素 ， 均 会 在 Wxml 面 板 中 自动 选择 该 元 素 。 直 接 在 Wxml 面 板 中 修改 样式 ， 待 效果 完善 ， 然 后 将 之 复制 至 代码 中 即 可 。 








Os 在 旧版 本 的 微 信 开 发 者 工具 中 ， 点 选 视图 











元 素 的 操作 很 不 友好 ， 如 果 当 前 视窗 不 是 Wxml 面 板 ， 工具 会 提示 用 户 “ 请 先 切 换 至 Wxml 面 板 ”， 而 不 会 自动 切换 。 


43 ”关于 static 目 录 











在 pages/index/index.wxml 文 件 中 ,使 用 了 图 像 组 件 image， 以 “static/image” 开 头 的 src 属 性 ,使 用 的 是 绝对 地 址 。 每 个 小 程序 项 目 都 相当 于 是 微 信和 网 站 的 子 域名 网 站 ， 如 图 4-7 所 示 。 





© > Failed to load image http: //318341983. debug. open. weixin.qq.com/static/image/background/.jpg : the 
server responded with a status of 404 (HTTP/1.1 404 Not Found) 
From server 127.0.0.1 


图 4-7 











图 4-7 所 示 的 这 条 console 面 板 打 印 出 来 的 错误 消息 ， 是 由 于 没有 找到 图 片 资源 。 但 借 此 可 以 看 出 ， 该 项 目 位 于 子 域名 318341983.debug.open.weixin.qq.com 下 。 











下 载 项 目 源码 ， 解 压 ， 将 源码 中 的 static 目 录 复 制 到 小 程序 项 目 根 目录 下 。 完 成 后 的 文档 树 如 图 4-8 所 示 。 


a tg- RRRS a 


» M pages 
» M sim.js 





v fae Static 
v f= image s. 
» fe background 
> Me black 
> fe white 
|a] refesh.png 
app.js 
app.json 
{ } app.wxss 
|a| logo.png 


图 4-8 








static 目 录 一 般 包含 image、style、js 等 子 目录 ， 分 别 代表 图 像 、 样 式 、 脚 本 。 图 标 资源 一 般 放 在 static/imageVicon 下 。 遵 照 简单 易 读 易 维 护 的 原则 ， 资 源 目 录 应 使 用 单词 的 单数 形式 。 


44 ”实现 逻辑 层 


在 文档 树 中 打开 pages/indexwindexjs 文 件 ， 将 内 容 蔡 换 为 如 下 代码 : 





Page ({ 

data: { 
weather: {} 

ty 

onLoad() { 
this. loadWeather () 

hy 

loadWeather() { 
let app = getApp() 
wx.showLoading({ title: "加 载 中 " }) 


const background = { 

"大 "dayu", 
"dayu", 
"xiaoyu", 
"dayu", 

"; "leizhenyu", 
" 睛 ": "qing" 


l; 
// 先 以 让 查询 出 城市 
let requestCity = app.request ('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json') .then ( 
res => { 
var weather = {}; 
var city = res.city; 
weather.city = city; 
app. request (“http://wthrcdn.etouch.cn/weather_mini?city= ${city}*) .then( 








res => { 
if (res.status === 1000) { 
var data = res.data; 
var forecast = data.forecast; // 天 气 特征 与 未 来 天 气 


var futureList = []; 
for (var i = 0; i < forecast.length; i++) { 
var one = forecast [i]; 
var future = { 
week: one.date.slice(-3), 
type: one.type, 
wendu: one.low.split(' ') [1] + "-" + one.high.split(' ') [1] 


futureList.push (future) ; 
} 


var today = futureList[0]; 
if (background[today.type]) { 
today.typeBackgorund = background[today.type] ; 
} else { 
today.typeBackgorund = "default"; 
} 


weather.wendu = data.wendu 
weather.today = today 
weather.futureList = futureList.slice(1); 


this.setData ({ 
weather: weather 


he 


} 
wx.hideLoading () 
}) .catch(() => wx.hideLoading() ) 
}) .catch(() => wx.hideLoading() ) 




















上 述 代 码 先 是 调用 http://int.dpool.sina.com.cn/iplookup/iplookup.php? format=json 这 个 接口 ， 依 据 所 在 ip 地 址 信息 获取 所 在 城市 信息 。 























然后 调用 如 下 接口 ， 依 据 城市 查询 当地 天 气 数据 : 











‘http: //wthredn.etouch.cn/weather_mini?city=${city}' 








在 上 面 的 代码 中 ， 使 用 (") 符号 而 非 双 引 号 ("") 或 单 引号 (") ， 可 以 轻松 实现 变量 注入 ， 将 变量 city 注 入 到 字符 串 中 。 


4.4.1 js 函数 split 与 push 








以 下 代码 是 将 字符 串 one.low (例如 “低温 24*C”) 以 空格 字符 拆 分 为 数组 ， 再 获取 其 第 二 个 元 素 : 





one.low.split(' ') [1] 





下 述 代码 是 向 数组 futureList 中 推 入 新 元 素 future: 





futureList .push (future) 














这 行 代码 

catch(() => wx.hideLoading () ) 
等 同 于 : 

catch(() => {wx.hideLoading() }) 








因为 是 单行 ， 所 以 可 以 将 外 围 的 花 括 号 { 略 去 。 

















在 文档 树 中 打开 appjson， 将 小 程序 的 标题 修改 为 “ 黑 黑 天 气 ”。 由 于 代码 中 使 用 了 http 接 口 ， 无 法 添加 到 服务 器 安全 域名 ， 故 不 能 提交 审核 。 














44.2 下 载 源码 


在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 | 问题， 可 以 通过 如 下 方式 来 解决 。 


“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 





Boe AMAR 





























本 章 将 实现 一 个 带 有 tabBar 导 航 的 笑话 小 程序 。 如 图 5-1 所 示 ， 这 个 小 程序 共有 两 个 页 面 ， 第 一 个 页 面 是 笑谈 ， 第 二 个 页 面 是 趣 图 。 无 论 是 哪个 页 面 ， 向 下 滚动 到 底部 时 ， 都 可 以 触发 加 载 更 多 内 容 。 
到 5-2 是 单 击 图 片 放大 预览 的 效果 。 
















































































eeeee WeChat = 16:44 98% =) 


SAAB R .De 


SQFT BZA 


小 明 走 进 药店 ， 问 :“ 老 板 ， 有 没有 
治 打 吧 的 药 ?” 


thin: AR”. 


接着 他 拿 出 两 种 药 让 小 明 挑 。 正 挑 
着 ， 老板 大 喝 一 声 ， 吓 得 小 明 一 哆 哄 ， 
药 都 掉 到 了 地 上 ，。 | 


小 明 怒 道 :“ 你 有 病 啊 !” 


老板 笑 着 说 :“ 怎 么 样 ? 让 我 这 么 
一 吓 是 不 是 好 了 ?” 


小 明 更 生气 了 :“ 打 吗 的 是 我 妈 !” 


笑谈 R 











5-3 


前 往 https//mp.weixin.qq.com， 按 照 1.1 节 的 方法 ， 注 册 小 程序 账号 。 将 名 称 修 改 为 “ 笑 林 百 家 ”,， 将 介绍 修改 为 “笑话 、 趣 图 ”， 在 服务 类 目 中 选择 “工具 ”一 “图 片 /音频 /视频 ”。 另 外 ， 按 照 
2.9.2 节 的 方法 ， 制 作 如 图 5-3 所 示 的 头像 ， 并 修改 之 。 





打开 微 信 开 发 者 工具 ,按照 3.1 节 的 方法 ， 基 于 sim.js 项 目 模板 ,创建 初始 项 目 。 


5.2 ”实现 index 页 面 


为 了 练习 模板 组 件 的 使 用 方法 ， 本 节 将 定义 一 个 模板 组 件 ， 同 时 提供 给 pages/index/index 页 面 与 pages/index/image 页 面 使 用 。 





如 图 5-8 所 示 ， 在 文档 树 中 找到 pages/index 目 录 ， 在 此 目录 下 新 增 一 个 template.wxml 单 文件 ， 笔 者 随后 将 在 这 个 文件 中 创建 模板 组 件 。 


i: EMAAR .| app.json x 
1 { 
v fas pages — 


v fam index eR 
image.js 
image.json + 新 建 


e 


<> image.wxml a 目录 
{ } image.wxss 
index.js Page 


index.json js 


<> index.wxml . 
{ } index.wxss Json 
» M sim.js 
v õa Static 
v f= image 
v fae icon 
[a] funny.png 
[a] funny_on.png 
[a] joke.png 
[a] joke_on.png 





5.2.1 “定义 模板 组 件 


在 定义 模板 组 件 时 ， 将 template.wxml 文 件 的 标签 代码 修改 为 : 





a-box_text"> 
e weui-media-box_ title_in-text">{{item.title}}</view> 





</view> 
</template> 


<template name="imageJokeItem"> 
<view class="weui-panel"> 


<view class="weui-media-box title weui-media-box title in-text">{{item.title}}</view> 
<view class="weui-media-box desc"> = T 
<image src=" {{item.sourceurl}}" mode="aspectFit" bindtap= "preview" data-url="{{item.sourceurl}}"/> 
</view> 
</view> 
</view> 
</view> 
</template> 











这 个 文件 中 定义 了 两 个 模板 组 件 。 关 于 模板 组 件 的 相关 讲解 参见 2.6.2 节 。textJokeltem 组 件 用 于 显示 文本 笑话 ，imagejJokeltem 组 件 用 于 展示 趣 图 笑话 。 两 者 都 是 基于 weui 类 库 的 weui-panel 样 式 实 
现 的 。 

















在 组 件 imagejJokeltem 中 ， 通 过 bindtap 绑 定 了 预览 函数 preview。 模 板 文件 不 存在 逻辑 层 js 文 件 ， 该 函数 必须 由 组 件 的 调用 方 传递 进来 。 


5.2.2 import 与 include 的 区 别 


在 文档 树 中 打开 pagesindex/index.wxml 文 件 ， 将 标签 代码 替换 为 : 





<import src="template.wxml"/> 
<scroll-view style="height:100%" scroll-y bindscrolltolower="loadMore"> 

<template is="textJokeItem" data="{{item}}" wx:for="{{jokeList}}" wx:key= "title"/> 
</scroll-view> 


























在 这 个 文件 中 ， 首 先 会 引用 import 标 签 ， 然 后 会 引入 模板 文件 template.wxml。 为 了 简单 起 见 ， 这 里 将 文本 笑话 的 组 件 与 图 片 笑话 的 组 件 定义 在 了 一 个 文件 中 。 昌 然 在 这 个 页 面 中 只 需要 使 有 
textJokeltem 组 件 ， 但 并 不 会 造成 元 余 和 浪费 。import 是 “引用 ” 式 的 引用 ， 与 import 不 同 的 是 include 导 入 ， 后 者 是 将 目标 文件 的 代码 复制 到 include 标 签 所 在 的 位 置 。 





















































这 里 为 scroll-view 组 件 添加 了 height 等 于 100% 的 样式 ， 如 果 没 有 这 个 样式 ，scroll-tolower 的 事件 将 不 能 触发 。 








@,, 将 scroll-view 组 件 的 style 属 性 去 除 ， 然 后 观察 能 否 触发 触 底 事 件 。 


5.2.3 “js 数组 函数 


在 文档 树 中 打开 pages/index/index.js 文 件 ， 将 代码 替换 为 : 





Page ({ 
data: { 
page: 1, 
jokeList: [], 


, 
onLoad(options) { 
this. retrieve () 
hr 
retrieve() { 
let app = getApp() 


var url = “http://api.laifudao.com/open/xiaohua.json?page=${this.data.page} &size=10° 
app. request (url) .then ( 
res => { 
console.log (res) 
res = res.map(item => ({title:item.title, content: item.content.replace (/<br\/>/g,'\n')}) ) 
this.setData ({ 
jokeList: this.data.jokeList.concat (res) 
t3) 
}) 


r 

loadMore() { 
++this.data.page 
this .retrieve () 


























在 页 面 初始 数据 data 中 ，page 表 示 当 前 页 码 ，jokeList 用 于 储存 加 载 到 的 笑话 列表 ， 作 为 视图 层 泻 染 之 用 。 

















Oza 由 于 本 章 小 程序 所 用 的 笑话 API 并 不 支持 分 页 查询 ， 所 以 关于 page 的 使 用 仅 是 模拟 正常 调用 。 读 者 在 调试 代码 的 过 程 中 会 发 现 ， 后 续 加 载 的 内 容 与 前 面 的 相 重 合 。 


下 面 针 对 上 述 代 码 进一步 说 明 。 


-js 数组 函数 concat 











下 面 这 行 代码 使 用 了 js 的 concat 函 数 。concat 意 即 合 并 ， 它 会 将 两 个 或 多 个 数组 合并 为 一 个 数组 并 返回 : 














this.data.jokeList.concat (res) 


打开 接口 的 网 址 http:/apilaifudao.com/open/xiaohuajso， 可 以 看 到 返回 的 数据 库 包 含 了 “<bY>”， 这 是 html 换 行 标签 。 在 小 程序 中 ， 尚 不 存在 可 以 正常 解析 它 的 组 件 。 解 决 方法 唯 有 将 它 转换 
为 换行 符 An” ， 小 程序 的 text 组 件 支持 换行 符 "n" ANER, 








2Jj5 数 组 函数 map 


在 下 面 这 行 代码 中 ， 至 少 包括 了 三 个 值得 一 提 的 知识 点 : 





res.map (item => ({title:item.title,content:item.content.replace (/<br\/>/g,'\n')}) ) 

















1) map 是 js 自 带 的 函数 ， 它 将 目标 数组 的 元 素 依次 传递 给 指定 的 函数 ， 经 函数 处 理 后 组 成 新 的 数组 并 返 


























回 








2) 以 下 代码 是 一 个 简写 的 箭头 函数 ， 形 参 是 item。 





item => (http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/..) 


3) 当 箭 头 函 数 的 代码 仅 有 一 行 时 ，return 关 键 字 可 以 省 略 ， 以 括号 0 表示 返回 。 





5.24 “js 正则 表达 式 




















以 下 代码 将 content 中 的 “<br/>” 蔡 换 为 ^\n”。replace 是 js 自 带 的 替换 方法 ， 第 一 个 参数 既 可 以 是 字符 串 文本 ， 也 可 以 是 正则 表达 式 ， 在 这 里 笔者 使 用 的 是 正则 表达 式 。g 代 表 全 局 ， 即 替换 所 有 匹 

































































配 项 。 在 js 正则 表达 式 中 ，“/” 属于 特殊 字符 ， 在 使 用 时 须 用 “人 \” 转 义 为 字面 量 。 





item.content .replace (/<br\/>/g, '\n') 




















正则 表达 式 是 用 于 匹配 字符 串 中 字符 组 合 的 模式 ， 其 由 包含 在 斜 杠 之 间 的 模式 组 成 ， 如 下 所 示 : 





const regex = /abtc/; 
const regex = /*[a-zA-Z]+[0-9]*\W?_$/gi; 

















特殊 字符 在 正则 表达 式 中 具有 特殊 的 规定 意义 ， 并 非 字符 本 身 的 字面 量 意义 。 下 面 是 js 正则 表达 式 中 的 特殊 字符 列表 。 








Ae 在 非特 殊 字 符 之 前 的 反 儿 杠 表示 下 一 个 字符 是 特殊 的 ， 不 能 从 字面 上 解释 。 或 者 将 其 后 的 特殊 字符 ， 转 义 为 字面 量 。 
“人 ^: 匹配 输入 的 开始 。 如 果 多 行 标志 被 设置 为 tue， 那 么 也 要 匹配 换行 符 后 紧 跟 的 位 置 。 
$: 匹配 输入 的 结束 。 如 果 多 行 标志 被 设置 为 tue， 那 么 也 要 匹配 换行 符 前 的 位 置 。 

“*: 匹配 前 一 个 表达 式 0 次 或 多 次 。 等 价 于 {0，} 。 


+: 匹配 前 面 一 个 表达 式 1 次 或 多 次 。 等 价 于 {1，}。 


“? : 匹配 前 面 一 个 表达 式 0 次 或 1 次 。 等 价 于 {0，1}。 如 果 紧 跟 在 任何 量词 “*”“+”“? ”或 “人 ”的 后 面 ， 将 会 使 量词 变 为 非 贪 焚 的 〈 匹 配 尽量 少 的 字符 ) ， 这 点 与 默认 使 用 的 贪 柳 模式 (匹配 尽 
可 能 多 的 字符 ) 正好 相反 。 例 如 : “123abc” 应 用 /\d+/ 将 会 返回 “123”， 如 果 使 用 /\d+? /， 那 么 就 只 会 匹配 到 “1”。 


(小 数 点 ) 匹配 除 换行 符 之 外 的 任何 单个 字符 。 
:xly: 匹配 ‘x’ A y 
{0}: n 是 一 个 正 整数 ， 匹 配 前 面 一 个 字符 刚好 发 生 了 n 次 。 
.fn，m}: n 和 m 都 是 正 整数 。 匹 配 前 面 的 字符 至 少 n 次 ， 最 多 m 次 。 如 果 n 或 m 的 值 是 0， 那 么 这 个 值 将 被 忽略 。 


Byd: 一 个 字符 集合 。 匹 配方 括号 中 的 任意 字符 ， 包 括 转 义 序列 。 可 以 使 用 破 折 号 (-) 来 指定 一 个 字符 范围 。 对 于 点 号 〈.) 和 星 号 (*) 这 样 的 特殊 符号 在 一 个 字符 集中 没有 特殊 的 意义 。 他 们 不 必 
进行 转 义 ， 不 过 转 义 也 是 起 作用 的 。 


Dyl: 一 个 反 向 字符 集 。 也 就 是 说 ， 它 匹配 任意 一 个 没有 包含 在 方 括号 中 的 字符 。 你 可 以 使 用 “-” 来 指定 一 个 字符 范围 。 任 何 普通 字符 在 这 里 都 是 起 作用 的 。 
+ \d: 匹配 一 个 数字 。 等 价 于 [0-9]。 

“ AD: 匹配 一 个 非 数 字 字 符 。 

“ \s: 匹配 一 个 空白 字符 ， 包 括 空格 、 制 表 符 、 换 页 符 和 换行 符 。 

“\S; 匹配 一 个 非 空白 字符 。 

“ \w; 匹配 一 个 单字 字符 (字母 、 数 字 或 者 下 划 线 ) 。 等 价 于 [A-Za-z0-9_]。 


“\W: 匹配 一 个 非 单字 字符 。 等 价 于 [A-Za-z0-9_]。 


53 ”实现 image 页 面 





在 文档 树 中 打开 pages/index/image.wxml| 页 面 ， 将 标签 代码 替换 为 : 











<import src="template.wxml"/> 


<scroll-view style="height:100%" scroll-y bindscrolltolower="loadMore"> 
<template is="imageJokeItem" data="{{item,preview}}" wx:for="{{picbist}}" wx:key="title"/> 
</scroll-view> 























这 个 页 面 引 入 了 模板 文件 template.wxml， 使 用 预定 义 的 imagejokeltem 模 板 ， 循 环 泻 染 了 picList 数 组 ， 完 成 了 趣 图 列表 的 











E70 





5.3.1 “将 函数 作为 参数 传递 























pages/index/image.wxml 页 面 的 标签 代码 与 pages/index/index.wxml 中 的 代码 类 似 。 在 模板 调用 代码 中 ， 通 过 data 不 仅 传递 了 数据 对 象 tem， 还 传递 了 一 个 页 面 函 数 preview。 在 wxmlI 页 面 中 ,可 
以 在 事件 绑 定 中 使 用 函数 ， 在 模板 组 件 的 数据 绑 定 中 ， 也 可 以 使 用 函数 。 不 同 之 处 在 于 ， 事 件 绑 定 的 函数 不 需要 放 在 花 括号 (0) 中 ， 而 此 处 的 preview 须 置 于 花 括号 之 内 。 

























































































在 js 中 ， 函 数 Function 可 以 与 字符 串 String、 对 象 Object 等 视 为 同等 地 位 的 数据 ， 也 可 以 在 函数 中 作为 参数 传递 ， 或 者 作为 结果 返 





回 








5.3.2 ”关于 lower-threshold 属 性 

















scroll-view 是 可 滚动 视图 容器 组 件 ，scroll-y 代 表 竖 向 滚动 ，lower-threshold 代 表 距 离 底部 多 远 时 ， 触 发 scrolltolower 事 件 。 如 果 设 置 为 100， 则 代表 距离 底部 不 足 100 时 触发 该 事件 。 默 认为 50， 代 表 
距离 底部 不 足 50 时 触发 该 事件 。 





这 里 将 设置 lower-threshold 为 100，lower-threshold 的 单位 是 px。 






































在 appjs 中 设置 的 tabBar， 占 据 了 屏幕 100rpx 的 高 度 。 这 使 得 每 个 页 面 的 屏幕 高 度 减少 了 100rpx， 但 lower-threshold 是 从 tabBar 的 上 边缘 开始 计算 的 ， 所 以 有 没有 tabBar 并 不 会 对 scroll-view 在 触发 
scrolltolower 事 件 上 造成 影响 。 








loadMore 将 是 我 们 在 逻辑 层 定义 的 函数 ， 用 于 加 载 更 多 内 容 。 

















5.3.3 ”使 用 wx.previewlmage 接 口 





在 文档 树 中 打开 pages/image/image.js 文 件 ， 将 其 内 容 替 换 为 如 下 代码 : 





Page ({ 
data: { 
page: 1, 
picList: [] 
Ey 
retrieve() { 
let app = getApp() 


var url = “http://api.laifudao.com/open/tupian.json?page=${this.data.page} &size=10~ 
app. request (url) .then ( 
res => { 
this.setData ({ 
picList: this.data.picList.concat (res) 
B 
}) 


ty 
onLoad(options) { 
this. retrieve () 


ty 

// 滑动 到 底部 加 载 更 多 

loadMore() { 
++this.data.page 
this.retrieve () 


preview(e) { 
var urls = [e.target.dataset.url] 
wx.previewImage ({ 
urls: urls 


























函数 preview 使 用 了 微 信人 小 程序 的 图 像 预览 接口 wx.previewlmage。 图 像 预览 体验 与 微 信 中 的 类 似 。 





























由 于 使 用 了 http 接 口 ， 所 以 这 个 项 目 不 能 提交 审核 。 





5.4 下载 源码 











在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 


“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


:下载 作者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 笑 林 百 家 5.3” 获 取 下 载 地 址 。 


第 6 章 EARP 








本 章 主要 实现 一 个 联系 人 列表 ， 并 基于 图 灵 API 实 现 自动 聊天 功能 ， 如 图 6-1 和 图 6-2 所 示 。 
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D 木 阿木 
刚刚 


十 好 几 年 前 的 事 了 ， 那 时 十 六 七 岁 。 在 一 个 陌生 的 
小 镇 饮食 区 吃饭 。 
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我 知道 了 ， 当 时 的 那 种 灵感 叫 顿 悟 。 面 对 复杂 问题 


的 时 候 ， 问 题 本 身 就 是 答案 。 a x 
吴 ， 问 题 阿 静 北京 


F aa 北京 





首页 朋友 我 的 首页 朋友 我 的 


图 6-1 





Hi, iam here 





hi, too 











在 该 聊天 小 程序 里 ， 首 页 实现 了 下 拉 更 新 ， 向 下 滚动 可 以 加 载 更 多 的 功能 。 


首先 ， 
并 修改 之 。 


然后 ， 


接着 ， 


从 本 章 6.6 节 下 载 源码 ， 解 压 ， 获 取 static 资 源 目录 ， 并 复 钊 


图 6-3 














前 往 https://mp.weixin.qq.com， 按 照 1.1 节 的 方法 ， 注 册 小 程序 账号 。 将 名 称 修改 为 “图 灵 聊 聊 ”， 将 介绍 修改 为 “自动 聊天 小 工具 ”。 然 后 按照 2.9.2 节 介绍 的 方法 ， 制 作 图 6-3 所 示 的 头像 ， 




















打开 微 信 开 发 者 工具 ， 按 照 3.1 节 介绍 的 方法 ， 基 于 sim.js 项 








在 文档 树 中 打开 app.json， 将 小 程序 标题 修改 为 “图 灵 聊 聊 ” 





























在 文档 树 中 打开 appjson， 参 照 5.2 节 的 方法 设置 tabBar， 代 码 如 下 : 


"tabBar": { 
"color": "#929292", 
"selectedColor": "#££9630", 
"backgroundColor": "#£7£7£8", 


"borderStyle": "white", 
niist"; [1 


"pagePath": "pages/index/index", 


"text": "HW", 
"iconPath": "/static/image/icon/home-outline.png", 
"selectedIconPath": 


"/static/image/icon/home-selected.png" 


"pagePath": "pages/index/contact", 
H" 


"text": "AH 
"iconPath": "/static/image/icon/contacts-outline.png", 
"selectedIconPath": 


"/static/image/icon/contacts-selected.png" 


tr { 


"pagePath": "pages/index/my", 
"text": "我 的 
"iconPath": "/static/image/icon/my-outline.png", 


























模板 创建 初始 项 











到 “图 灵 聊 聊 ” 项 目的 根 目录 下 。 

















其 中 ，static/image/icon 目 录 下 的 图 标 文件 ， 可 以 参考 本 书 5.1 节 在 “使 



































icon” 中 提 到 的 方法 快速 生成 。 


"selectedIconPath": "/static/image/icon/my-selected.png" 
H 











在 以 上 代码 中 ， 定 义 了 “首页 ”“ 朋 友 ” “我 的 ”三 个 tab， 完 成 后 效果 如 图 6-4 所 示 。 


La» a 











首页 朋友 我 的 


图 6-4 


6.2 ”实现 联系 人 页 面 














在 实现 联系 人 页 面 时 ， 首 先 要 使 用 2.1.3 节 快捷 创建 页 面 的 方法 ,创建 pages/index/contact 页 面 。 

















然后 在 文档 树 中 打开 pages/index/contact.wxml 文 件 ， 将 内 容 蔡 换 为 如 下 标签 代码 : 





<block wx:for="{{contacts}}" wx:key="nickname"> 
<view class="weui-cells_ title">{{item.header}}</view> 
<view class="weui-cells weui-cells_after-title"> 
<navigator url="message?name={{item.nickname}}" wx: for="{ {item.list}}" wx:key="nickname" class="weui-cell weui-cell access"> 
<view class="weui-cell_hd "> T 
<image src="{{item.avatar}}" style="margin-right: 20rpx;vertical-align: middle;width:80rpx; height: 80rpx; "></image> 
</view> 
<view class="weui-cell bd ">{{item.nickname}}</view> 
<view class="weui-cell ft weui-cell ft in-access">{{item.location}} 
</view> 
</navigator> 
</view> 
</block> 





在 上 述 代码 中 ，contacts 是 在 逻辑 层 定义 的 联系 群 组 ，header 是 分 组 字母 ，list 是 该 分 组 下 的 元 素 。 








这 里 还 使 用 了 吝 套 的 wx: for， 内 许 循 环 的 对 象 是 item.list。item.avatar 中 的 item 与 item.list 中 的 item 并 非 指 同一 个 item。 











相对 路 径 下 的 页 面 message 是 自动 聊天 的 窗口 ， 将 在 下 面 的 代码 中 进行 定义 。 





在 文档 树 中 打开 pages/index/contact.js 文 件 ， 将 内 容 蔡 换 为 如 下 js 代码 : 





Page ({ 
data: { 
contacts: [] 
ty 
onLoad() { 
let app = getApp() 
app. request (http: //1265839903.debug.open.weixin.qq.com/server/contacts.json').then(res => { 
this.setData ({ 
contacts: this.formatContacts (res.data) 
}) 
}) 
by 
formatContacts (items) { 
var result = [] 
var group = { header: '', list: [] } 
for (var i in items) { 
var item = items[i] 
if (item.header) { 
if (item.header != group.header) { 
if (group.list.length > 0) result.push (group) 
group = { header: item.header, list: [] } 
} 
} 
item.avatar = `/static/image/${item.avatar % 4} .jpeg 
group.1list.push (item) 
} 


return result 






































细心 的 读者 不 难 发 现 ， 文 件 pages/index/contactjs 中 使 用 的 调试 地 址 与 pages/index/indexjs 中 使 用 的 调试 地 址 并 不 相同 ， 这 说 明 每 个 小 程序 都 会 有 不 同 的 调试 地 址 ， 调 试 地 址 也 仅 能 临时 用 于 开发 





























从 服务 器 取 回 的 数据 未 必 适 合 直 接 泻 染 ， 在 函数 formatContacts 中 ， 会 将 数据 按 header 字 段 进 行 分 组 ， 具 有 相同 header 的 元 素 将 放 在 同一 个 子 组 中 ， 然 后 在 视图 层 中 使 用 嵌 套 的 wx: for 进 行 泻 染 。 




















如 下 这 行 代码 ， 用 于 循环 数组 items 中 的 每 个 元 素 : 











for (var i in items) 





它 和 下 面 的 这 行 代码 是 等 价 的 : 





for (var i=0;i<items.length;i++) 





这 是 js 语言 中 遍历 数组 的 两 种 方法 ， 相 比 之 下 前 者 更 简洁 。 


6.2.1 js 中 的 引用 传递 


如 果 将 如 下 这 行 代码 : 





group = { header: item.header, list: [] } 





改 成 : 





group.header = item.header 
group.list.length = 0 





刷新 项 目 ， 代 码 不 能 正常 工作 。 第 二 种 方法 存在 问题 。 








从 表面 上 看 ， 第 二 种 方法 既 赋 值 了 header 字 段 ， 又 清空 了 list 子 数组 ， 效 果 应 当 与 第 一 种 方法 相同 。 但 在 js 语言 中 ， 对 象 (Object) 与 数组 (Array) 均 是 引用 传递 ， 第 二 种 方法 永远 都 只 是 改变 同一 个 
group 对 象 ， 并 没有 生成 新 的 对 象 ， 所 以 所 有 分 组 的 数据 在 视图 层 渲染 出 来 之 后 均 相同 。 



































6.2.2 js 数组 的 push 方 法 


在 函数 formatContacts 中 ， 存 在 如 下 这 行 代码 : 





group.list.push (item) 









































其 用 于 将 子 元 素 item 推 入 数组 groupJlist 中 。push 方 法 是 js 编程 中 最 常用 的 操作 数组 的 方法 之 一 ， 接 下 来 将 对 它 进行 详细 介绍 。 


(1) 定义 





push () 方法 可 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 。 


(2) 语法 





arrayObject .push (newelement1, newelement2,....,newelementX) 











第 一 个 参数 newelement1 是 必需 的 ， 代 表 要 添加 到 数组 的 第 一 个 元 素 。 第 二 个 、 第 三 个 元 素 是 可 选 的 ， 可 以 同时 添加 多 个 元 素 。 








push 方 法 可 将 它 的 参数 顺序 添加 到 数组 的 尾部 。 该 方法 直接 修改 原 数组 ， 而 不 是 创建 一 个 新 的 数组 。push 方 法 和 pop 方 法 使 用 数组 提供 的 先进 后 出 栈 的 功能 。 





(3) 示例 

















在 下 面 的 代码 中 ， 首 先 使 用 new 关 键 字 创 建 一 个 容量 为 3 的 新 数组 arr， 然 后 通过 下 标 访问 的 方式 分 别 为 三 个 数组 元 素 赋值 ， 接 着 调用 push 方 法 向 数组 尾部 推 入 新 元 素 ， 此 时 的 容量 增加 了 1， 但 数组 的 
内 存 地 址 并 没有 改变 。 





var arr = new Array (3) 


arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 


arr.push ("James") 
console.log(arr) 





以 上 代码 的 输出 结果 为 : 





["George", "John", "Thomas", "James"] 





6.2.3 ”接口 返回 数据 的 通用 格式 














在 周期 函数 onLoad 中 ， 使 用 app.request 从 本 地 server 目 录 中 加 载 contacts,json 文 件 ， 该 文件 的 内 容 如 下 所 示 : 





"err code": 0, 

"err msg": "success", 

"data": [ 
{"nickname": 
{"nickname": 
{"nickname": "fi 
{"nickname" : "fi 
{"nickname": 
{"nickname": 
{"nickname": "fi 
{"nickname": "Bal AK", "locatio: 











Fi", "avatar" :"1", "header": "A")}, 
Fi", "avatar" :"5", "header": "A")}, 
江宁 "avatar" :"3", "header": "A")}, 
JLP", "avatar" :"6", "header": "K")}, 
京 ", "avatar" :"10", "header" :"K"}, 
J", "avatar" :"1", "header" :"M"}, 
ILP", "avatar" :"4", "header" :"O"}, 


wa", "avatar":"5", "header":"O"} 














header 字 段 的 值 并 不 是 nickname 字 段 的 首 字母 ， 这 里 仅 是 为 了 测试 分 组 的 功能 而 随意 指定 的 。 











服务 器 返回 的 数据 ， 一 般 包 括 三 个 部 分 : 错误 码 、 错 误 消息 、 数 据 。 对 应 于 contactsjson 文 件 中 的 字段 分 别 是 : err_ code、err_msg 和 data。 


6.3 ”实现 聊天 页 面 











使 用 本 书 2.1.3 节 快捷 创建 页 面 的 方法 ,创建 pages/index/message 页 面 。 




















在 文档 树 中 打开 pages/index/message.wxml 文 件 ， 将 内 容 蔡 换 为 如 下 标签 代码 : 





<view style="padding:0 30rpx;padding-bottom:100rpx; "> 
<block wx: for="{ {messages} }"> 
<view class="message flex-row {{item.from = "sent' ? 'message-sent' : ''}}"> 
<view class="message-text {{item.from === 'sent' ? 'message-sent-text' : 'message-received-text'}}"> 
<text wx:if="{{!item.image}}">{{item.text}}</text> 
<image wx:else mode="aspectFit" catchtap="previewImage" data-image="{{item.image}}" src="{{item.image}}" class="message-image"></image> 
</view> 
</view> 
</block> 
</view> 
<view class="weui-flex" style="box-sizing: border-box;width:100%;position:fixed; bottom:0;padding:10rpx; height : 80rpx; background-color: #e7e7e7 ;"> 
<view class="weui-flex_item"> 
<input class="message-input" value="{{inputContent}}" bindchange= "bindChange" /> 





</view> 
<button style="margin-top:0;margin-left:10rpx;padding:0 20rpx;" bindtap= "sendMessage" class="weui-btn mini-btn" type="primary" size= "mini"> 发 送 </button> 
</view> 





message 页 面 的 视图 分 为 上 、 下 两 部 分 ， 上 面 是 聊天 消息 列表 ， 如 图 6-8 所 示 。 


< 返回 阿 北 eee 

















Hi, iam here 





图 6-8 




















下 面 是 一 个 文本 输入 框 ， 固 定 在 屏幕 旗 端 ， 如 图 6-9 所 示 。 





































































































图 6-9 
63.1 在 视图 渲染 中 使 用 三 目 运 算 符 
下 面 这 行 代码 使 用 了 js 语言 的 三 目 运 算 符 : 
{{item.from === 'sent' ? 'message-sent' : ''}} 
在 这 里 ， 如 果 item.from 等 于 sent， 则 使 用 message-sent 样 式 ; 如 果 不 等 于 ， 则 返回 空 。 
在 小 程序 视图 层 的 泻 染 代码 里 ， 如 果 想 实现 条 件 泻 染 ， 除 了 使 用 wx: if 标签 之 外 ， 另 一 个 方法 便 是 使 用 三 目 运算 符 ， 使 用 三 目 运算 符 可 以 减少 标签 代码 量 ， 使 代码 更 加 简洁 清晰 。 
























































63.2 js 中 的 全 等 于 与 等 于 运算 符 





回 


在 js 中 ，=== 是 全 等 于 运算 符 ， 要 求 类 型 与 值 均 相同 == 是 等 于 运算 符 ， 即 使 类 型 不 同 ， 只 要 值 相等 ， 也 返回 true。 例 如 ， 下 面 这 行 代码 将 返 








true: 


四 














"123" 一 123 








在 下 面 这 行 代 码 中 ，item.from 必 须 全 等 于 “sent'” ， 字 符 串 message-sent 才 会 被 











{{item.from === 'sent' ? 'message-sent' : ''}} 


























在 开发 中 ， 如 果 能 够 确定 运算 符 右 值 的 类 型 ， 则 建议 使 用 全 等 于 运算 符 ; 反之 ， 则 使 用 等 于 运算 符 。 后 者 在 编程 中 具有 更 大 的 灵活 性 ， 但 也 可 能 埋 下 难以 察觉 的 bug。 目 前 流行 的 高 级 编程 语言 ， 如 Go 
语言 、Swift 语 言 、Java 语 言 等 ， 无 一 不 是 强 类 型 语言 。 强 类 型 ， 即 每 个 变量 的 类 型 在 运行 时 都 是 确定 的 。js 不 是 强 类 型 语言 ， 但 在 编程 规范 和 习惯 上 仍 可 以 向 强 类 型 语言 看 齐 。 
































6.3.3 wx: i 你 件 泻 染 








下 面 的 这 两 行 代码 使 用 了 条 件 泻 染 : 











<text wx:if="{{!item.image}}">{{item.text}}</text> 
<image wx:else mode="aspectFit" catchtap="previewImage" data-image="{{item.image}}" src="{{item.image}}" class="message-image"></image> 





这 里 的 wx: if 所 表示 的 意思 是 : 如 果 item.image 有 值 ， 不 为 空 ， 则 泻 染 text 组 件 ; 否则 ， 执 行 wx: else， 泻 染 image 组 件 。 


value= "ffinputContent}j}" 绑 定 的 是 文本 框 的 输入 ，inputContent 是 定义 在 data 上 的 变量 之 一 。bindchange= "bindChange" 是 将 值 变化 事件 绑 定 到 函数 bindChange 上 。 





6.3.4 ”使 用 css 遮 罩 实 现 消息 框 样式 


在 文档 树 中 打开 pages/index/message.wxss 文 件 ， 将 内 容 蔡 换 为 如 下 样式 代码 : 





-message { 
margin: 28rpx 0; 
box-sizing: border-box; 

} 

-message-text { 
font-size: 32rpx; 
border-radius: 40rpx; 
display: inline-block; 
background-color: #e5e5ea; 
padding: 20rpx 30rpx; 
max-width: 70%; 
word-break: break-all; 
border-radius: lpc 1lPc 1pc 0; 
-webkit-mask-box-image: url ("data:image/svg+xml;charset=utf£-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35cl 7-5 37-42 

} 

.message-sent-text{ 
padding-right: 40rpx; 
background-color: #00d449; 
border-radius: lpc Ipc 0 1pc; 
-webkit-mask-box-image: url ("data:image/svg+xml; charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35cl 7-5 37-42 

} 

.message-received-text{ 
padding-left: 40rpx; 
box-sizing: border-box; 

} 

-message-sent { 
flex-direction: row-reverse; 
color: #£ff; 
display: flex; 

} 

-message-image{ 
width: 200rpx; 
height: 240rpx; 
padding-top: 15rpx; 

} 

.message-input{ 
box-sizing: border-box; 
width: 100%; 
height: 100%; 
border: lrpx solid #c8c8cd; 
border-radius: 6rpx; 
background: #fff; 
padding: 0 10rpx; 
font-size: 30rpx; 




















样式 box-sizing: border-box 使 容器 具有 一 个 规定 大 小 的 边框 。 


























-webkit-mask-box-image 属 性 是 为 容器 创建 一 个 同样 大 小 的 庶 罩 ， 我 们 在 视图 层 看 到 的 图 6-10 所 示 的 消息 框 效果 便 是 基于 这 





属性 来 实现 的 。 

















> 
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图 6-10 








由 于 发 送 者 与 接收 者 消息 框 的 样式 不 同 ， 所 以 笔者 分 别 声明 了 message-text 与 message-sent-text 这 两 个 不 同 的 样式 ， 然 后 在 视图 层 上 通过 三 目 运算 符 判 断 message 的 from 属 性 ， 演 染 不 同 的 样式 。 




















在 wxss 的 样式 定义 中 ，url 既 可 以 接收 一 个 图 片 地 址 ， 也 可 以 接收 一 段 直接 的 image 数 据 。 一 些 特定 的 svg 数据 ， 如 上 面 的 边框 效果 ， 并 非 人 工 直接 输出 的 ， 需 要 先 由 矢量 软件 可 视 化 创作 ， 然 后 转 成 svg 
数据 。 对 于 小 程序 的 初学 者 来 说 ， 对 此 不 必 过 多 深入 。 






































635 ”调用 图 灵 接 口 





在 文档 树 中 打开 pages/index/message.js 文 件 ， 将 内 容 蔡 换 为 如 下 js 代码 : 





let app = getApp() 
Page ({ 
data: { 
messages: [], 
inputContent: '' 
, 
onLoad(options) { 
let name = options.name || ' 聊 聊 " 
wx. setNavigationBarTitle ({ 
title: name 


app. request (“http://1265839903.debug.open.weixin.gqq.com/server/message.json~).then(res => { 
console.log(res.data) 
this.setData ({ 
messages: res.data 


H 
tr 
bindChange(e) { 
this.data.inputContent = e.detail.value 


hy 
getTulingMsg(info) { 
let url = 'http://www.tuling123.com/openapi/api?key=88c5££481e654bb6819982£60d288a97 &info=${info}'; 
app.request (url) .then (res => { 
console. log (res) 
if (res.code == 100000) { 
let message = { 
from: 'received', 
text: res.text 
} 
this.setData ({ 
messages: [http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...this.data.messages, message] 
3) 
} 
D) 
ty 
sendMessage() { 
if (this.data.inputContent) return 
let message = { 
text: this.data.inputContent, 
from: 'sent' 


} 

this.setData ({ 
messages: [http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...this.data.messages, message], 
inputContent: '' 

H 

this.getTulingMsg (message. text) 


, 
previewImage (event) { 
wx.previewImage ({ 
urls: [event.target.dataset.image] 
B 
} 
}) 





下 面 是 针对 上 述 代 码 的 说 明 。 























1) 在 函数 getTulingMsg 中 ， 调 用 了 网 站 www.tuling123.com 的 免费 聊天 接口 ， 读 者 可 自行 申请 。 用 于 测试 的 apikey， 每 天 限量 请 求 5000 次 。 









































2) 函数 previewlmage 用 于 预览 消息 中 出 现 的 图 片 ， 它 调用 了 微 信 小 程序 图 像 预 览 接口 wx.previewlmage。 






























































3) 当 用 户 在 视图 层 单 击 “ 发 送 ”按钮 时 ， 会 触发 函数 sendMessage。 在 这 个 函数 中 ， 首 先 会 判断 inputContent 是 否 为 空 ， 如 果 是 ， 则 返 
组 ， 并 与 inputContent 变 量 一 起 使 用 setData 刷 入 视图 层 。 最 后 ， 调 用 函数 getTulingMsg 取 得 自动 应 答 的 内 容 。 











回 





。 其 次 ， 新 建 一 个 message 对 象 ， 将 之 推 入 messages 数 



















































































6.3.6 js 中 的 逻辑 或 操作 


在 周期 函数 onLoad 中 ， 下 面 这 行 代码 : 








let name = options.name || ' 聊 聊 ' 























回 








表示 如 果 options.name 有 值 ， 则 赋值 于 变量 name， 和 否则 使 用 默认 值 “ 聊 聊 ”。 “| ”在 js 语言 中 是 逻辑 或 操作 符 ， 用 于 在 赋值 语句 中 优先 返回 前 面 的 值 。 





























6.3.7 js 中 的 let 关 键 字 








let 是 js 语言 中 的 块 级 作用 域 声明 符 ， 与 var 不 同 的 是 ， 它 声明 的 变量 仅 在 当前 代码 块 中 有 效 。 对 于 代码 块 ， 可 以 简单 理解 为 一 个 花 括 号 之 内 的 范围 ， 比 如 ， 一 个 函数 、 一 个 if 语句 、 一 个 for 语 句 均 是 块 级 
作用 域 。 


























在 开发 中 ，let 和 var 关 键 字 的 异同 如 下 : 


1) 声明 后 未 赋值 ， 表 现 相同 。 





(_=> { 
var varTest; 
let letTest; 
console.log (varTest); // 输 出 undefined 
console.log (letTest); // 输 出 undefined 
nO 











2) 使 用 未 声明 的 变量 ， 表 现 不 同 。 











(_=>{ 

~ console.log (varTest) // 输 出 undefined 
console.log(letTest) // 直 接 报 错 
var varTest = 'varl' 
let letTest = 'letl' 





3) 重复 声明 同一 个 变量 时 ， 表 现 不 同 。 








(ae a 
var varTest 
let letTest 
var varTest 
// 没 问题 
let letTest = 'letTest changed.' 
// 直 接 报错 ， 提 示 变 量 已 经 声明 过 


"test Var OK.'; 
"test let OK.'; 
"varTest changed.' 


nO 














4) 变量 作用 范围 ， 表 现 不 同 。 








人 
Var varTest 
let letTest 
{ 


= 'test var OK.'; 
= 'test let OK.'; 
var varTest = 'varTest changed.'; 
let letTest = 'letTest changed.'; 
} 
console. log(varTest) g r 
// 输 出 "varTest changed."， 内 部 "{}" 中 声明 的 varTest 变 量 覆 盖 了 外 部 的 letTest 声 明 
console.log (letTest) R . 
// 输 出 "test let OK."， 内 部 "{}" 中 声明 的 letTest 和 外 部 的 letTest 不 是 同一 个 变量 
Wo 





从 以 上 的 对 比 中 不 难 发 现 ，let 关 键 字 增 强 代码 的 安全 性 。 在 开发 中 ， 要 优先 、 默 认 使 用 let 关 键 字 。 





64 ”实现 my 页 面 











使 用 本 书 2.1.3 节 快捷 创建 页 面 的 方法 ， 创 建 pages/index/my 页 面 。 





在 文档 树 中 打开 pages/index/my.wxml 页 面 ， 将 内 容 蔡 换 为 如 下 标签 代码 : 





<view class="weui-panel"> 
<view class="weui-panel bd"> 
<view class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell active"> 
<view class="weui-media-box hd weui-media-box hd in-appmsg"> 
<image class="weui-media-box thumb" src="{{userInfo.avatarUrl}}" /> 
</view> 
<view class="weui-media-box bd weui-media-box bd in-appmsg"> 
<view class="weui-media-box title">{{userInfo.nickName}}</view> 
<view class="weui-media-box desc">{{userInfo.city}}</view> 
</view> a 
</view> 
</view> 
</view> 
<view class="weui-cells"> 
<navigator url="about" class="weui-cell weui-cell_access"> 
<view class="weui-cell_hd"> 
</view> 
<view class="weui-cell_bd weui-cell_ ft_in-access"></view> 
</navigator> 
</view> 























户 对 象 userlnfo 将 在 逻辑 层 获 取 。 相 对 页 面 about 尚 不 存在 ， 稍 后 再 定义 。 


使 用 app.getUserlnfo 拉 取 用 户 对 象 


在 文档 树 中 打开 pages/index/myjs 文 件 ， 将 内 容 蔡 换 为 如 下 代码 : 





Page ({ 
data: { 
userinfo: {} 
hr 
onLoad() { 
let app = getApp() 
app.getUserInfo().then(userInfo => { 
this.setData ({ 
userinfo: userInfo 
这 
Ea 



































sim.js 类 库 中 的 函数 app.getUserlnfo， 用 于 拉 取 当前 用 户 对 象 ， 并 返回 一 个 Promise。 


在 文档 树 中 打开 sim.,jsindexjs 文 件 ， 可 以 找到 函数 getUserlnfo， 代 码 如 下 : 





function getUserInfo() { 
return new Promise(function (resolve, reject) { 


if (app.data.userInfo) { 
resolve (app.data.userInfo) 
return 


} 


wx. showNavigationBarLoading () 
let complete = function () { 

wx. hideNavigationBarLoading () 
} 


wx. login ({ 
success: _ => { 
wx.getUserInfo ({ 
success: res => { 
app.data.userInfo = res.userInfo 
resolve (app.data.userInfo) 
tr 
fail: reject, 
complete: complete 
}) 
] 
fail: reject, 
complete:complete 
}) 























在 这 个 函数 中 ， 首 先是 检查 在 app.data 中 是 否 已 经 存在 userlnfo， 如 果 有 ， 则 直接 返回 。 其 次 ， 调 
的 userlnfo 存 储 在 app.data， 以 便 下 次 拉 取 时 直接 使 用 。 

















6.5 ”实现 about 页 面 











使 








本 书 2.1.3 节 快捷 创建 页 面 的 方法 ， 创 建 pagesindex/about 页 














打开 pagesindexabout.wxml 文 件 ， 蔡 换 为 如 下 标签 代码 : 








小 程序 的 





户 登 录 接口 拉 取 用 户 信息 的 接 











wx.login， 成 功 之 后 再 调 有 




















wx.getUserlnfo。 将 获取 到 








<view class="weui-msg"> 
<view class="weui-msg__icon-area"> 


<image src="/static/image/logo.png" style="width:170rpx;height: 170rpx;border-radius:10rpx;"></image> 


</view> 
<view class="weui-msg__text-area"> 
<view class="weui-msg title"> 图 灵 聊 聊 </view> 
<view class="weui-msg desc"> 基 于 图 灵 接 口 实现 的 自动 聊天 示例 </view> 
</view> > 
<view class="weui-msg__extra-area"> 
<view class="weui-footer"> 
<view class="weui-footer__links"> 
<navigator class="weui-footer__link">www.rixingyike.com</navigator> 
</view> 
<view class="weui-footer text"> 日 行 一 刻 Copyright ? 2017</view> 
</view> 
</view> 
</view> 





SAT 











面 没有 变量 绑 定 ， 没 有 逻辑 层 代码 。 实 现 的 是 一 个 关于 页 面 ， 有 Logo、 简 介 、 网 址 等 ， 适 合 








这 个 页 





6.6 FORAS 











在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 


“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 








“下载 作者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 图 灵 聊 聊 6.5” 获 取 下 载 地 址 。 








第 7 章 “ 豆 豆 电影 服务 端 








作 一 般 的 项 














扫描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “小 程序 ” 进 群 。 

















在 前 面 第 2 章 的 示例 中 ,使 





的 豆 准 接口 存在 每 个 IP 每 分 钟 只 能 调 

















本 章 将 以 Golang 语 言 为 基础 ， 建 立 一 个 服务 端 ， 为 豆 豆 电影 提供 稳定 的 接口 服务 ， 去 除 限制 。 





10 次 的 限制 ， 如 果 刷 久 了 ， 特 别 是 使 有 











失败 的 情况 。 








即时 搜索 功能 的 时 候 ， 就 会 出 现 接 








调 























Golang 创 建 自 谷歌 ， 目 前 已 是 一 门 成 熟 的 、 开 源 的 、 类 库 完备 的 高 级 编程 语言 ， 用 该 语言 既 可 “ 








初学 者 学 习 编 程 ， 若 前 端 语言 学 习 JS， 后 端 语言 学 习 Golang， 则 无 往 而 不 利 。 


7.1 开发 后 端 程序 
711 安装 Golang 语 言 包 


Golang 语 言 ， 也 称 Go 语 言 。 请 前 往 谷 歌 Golang 官 网 https://golang.org/dl/， 下 载 Golang 安 装 包 ， 
Microsoft Windows 


Windows XP or later, Intel 64-bit processor 


Apple OS X 


go1.8.3.windows-amd64.msi (78MB) 





E", EEJ “ 杀 鸡 ” 。 


OS X 10.8 or later, Intel 64-bit processor 
go1.8.3.darwin-amd64.pkg (85MB) 


者 认为 ， 它 是 与 前 端 小 程序 开发 最 配套 的 后 端 语言 。 


如 





图 7-1 所 示 。 


Linux 
Linux 2.6.23 or later, Intel 64-bit processor 


go1.8.3.linux-amd64.tar.gz (86MB) 








图 7-1 











然后 选择 与 所 用 电脑 系统 相 适 配 的 版 本 ， 根 据 提 示 完 成 安装 。 














截至 本 书 结 稿 时 ，Golang 最 新 的 稳定 版 本 为 1.8.3。 它 具有 良好 的 向 前 兼容 性 ， 笔 者 自 Golang1.1 版 本 开始 使 用 ， 很 多 旧 代 码 现在 仍 可 以 正常 维护 。 

















读者 若 无 法 从 官网 下 载 ， 则 可 在 微 信 公 号 “ 艺 述 思维 ”中 回复 “Go 语言 安装 包 下 载 ”， 获 取 国内 的 镜像 地 址 。 





712 ”安装 仓库 管理 工具 git 














在 安装 好 Golang 之 后 ， 打 开 网 址 https://git-scm.com/downloads， 下 载 git 并 安装 ， 如 图 7-2 所 示 。 


Downloads 


@ Mac OSXX ay Windows 


A Linux >». Solaris 


图 7-2 





截至 本 书 发 稿 时 ， 最 新 的 git 稳 定 版 本 是 2.13.2， 下 载 与 自己 系统 相 适 配 的 版 本 ， 根 据 提示 安装 即 可 。 











Golang 安 装 类 库 使 用 的 是 go get 指 令 ， 该 指令 需要 远程 从 github 网 站 上 下 载 源码 ， 依 赖 于 git 指 令 ， 安 装 git 工 具 便 是 为 了 满足 go get 指 令 所 需 。 另 外 ， 很 多 Golang 类 库 在 国内 都 无 法 访问 ， 这 也 会 导 
致 go get 执 行 失败 。 









































在 装 有 Mac、Linux 系 统 的 电脑 上 ， 有 的 终端 环境 可 以 直接 运行 指令 。 在 Windows 电 脑 上 ， 安 装 git 工 具 之 后 ， 会 同时 安装 一 个 友好 易 用 的 git 命 令 行 工 具 ， 以 方便 执行 go get 指 令 ， 这 也 是 在 Windows 
上 安装 git 工 具 的 另外 一 个 作用 。 




































































ogo env 用 于 打开 Golang 语 言 环境 变量 ， 可 以 用 它 体验 环境 变量 的 设置 是 否 正确 。 





























7.1.3 ”安装 Go 语言 编辑 器 





写 代 码 怎么 可 以 没有 一 个 称 手 的 编辑 器 ? LitelDE 是 一 款 简单 、 开 源 免 费 、 跨 平台 的 IDE， 可 从 以 下 地 址 下 载 : 


https://golangtc.com/download/liteide 























LitelDE 的 安装 很 简单 ， 按 照 提示 进行 操作 即 可 。 另 外 ， 被 称 为 ws 的 WebStorm 是 更 为 强大 的 综合 编程 软件 ， 但 它 是 付费 的 ， 感 兴趣 的 读者 可 以 自行 搜索 、 下 载 试用 。 





7.14 ”使 用 sim.go 类 库 





打开 命令 行 工 具 ， 输 入 以 下 指令 : 





go get github.com/rixingyike/sim.go 





这 行 指令 是 为 了 安装 sim.go 所 依赖 的 第 三 方 类 库 。 找 到 第 2 章 创建 的 豆 豆 电影 项 目的 根 目录 ， 创 建 一 个 server 目 录 ， 然 后 在 命令 行 下 执行 cd 命令 到 该 目录 ， 并 输入 如 下 指令 : 





git clone https://github.com/rixingyike/sim.go.git ./ 














这 行 命令 是 为 了 下 载 sim.js 类 库 ， 以 便 在 此 基础 之 上 建立 豆 豆 电影 服务 端 。sim.js 是 笔者 开发 的 一 个 免费 、 开 源 的 第 三 方 类 库 ， 旨 在 帮助 初学 者 快捷 建立 自己 的 小 程序 后 端 程序 。 








打开 命令 行 工 具 ， 输 入 以 下 指令 : 





go get github.com/codegangsta/gin 

















该 指令 是 为 了 安装 编译 工具 gin。go 语 言 是 编译 型 语言 ， 它 与 解析 型 语言 (如 JS、Ruby、Python、Perl 等 ) 最 大 的 不 同 之 处 在 于 每 次 修改 完 代码 之 后 都 需要 将 代码 重新 编译 成 二 进 制 文 件 才 可 以 执行 。 
gin 工 具 是 用 Go 语言 编写 的 ， 安 装 gin 工 具 是 为 了 在 开发 过 程 中 实时 监控 代码 、 自 动 编译 并 刷新 执行 ， 这 样 编译 型 语言 相对 于 解析 型 语言 在 开发 中 的 不 便 就 大 大 降低 了 。 




































































现在 ， 回 到 server 目 录 ， 在 命令 行 中 执行 如 下 脚本 : 














./debug.sh 





该 脚本 的 内 容 是 : 





gin -a 4001 -p 4000 run main.go 








debug.sh 脚 本 是 为 了 在 4000 端 











715 tS Heo 











录 ， 新 建 一 个 douban.go 文 件 ， 将 内 容 蔡 换 为 如 下 代码 : 








打开 server/controller 





启动 服务 端 程序 。 执 行 完 毕 后 ， 在 浏览 器 中 打开 http://localhost: 


4000/hi， 如 果 看 到 “hi，sim.go” 输 出 ， 则 说 明 启 动 成 功 了 。 





import ( 
"gopkg.in/kataras/iris.v6" 


"http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/../1lib" 


"emt" 
) 


const DOUBAN_API BASE = "https://api.douban.com/v2" 
var apiResultCache = make (map[string] string) 


func init() { 
// 拉 取 单个 电影 信息 
web.Get ("/movie/subject/:id", func(c *iris.Context) { 
var id = c.Param("id") 
var pathKey = fmt.Sprintf ("movie/subject/%s", id) 


if result, exist := apiResultCache[pathKey]; exist { 
c.WriteString (result) 
return 


} 


var result = sim.HttpGet (fmt.Sprintf("%s/%s",DOUBAN_API_BASE,pathKey), nil,nil) 


apiResultCache[pathKey] = result 
c.WriteString (result) 
n 


// 拉 取 三 个 榜 单数 据 
web.Get ("/movie/bang/:key", func(c *iris.Context) { 
var key = c.Param("key") 
var pathKey = fmt.Sprintf ("movie 


ss", 


key) 
if result, exist := apiResultCache[pathKey]; exist { 
c.WriteString (result) 
return 
} 
var result = sim.HttpGet (fmt .Sprintf ("%s/%s", 
apiResultCache[pathKey] = result 
c.WriteString (result) 
}) 


// 搜索 

web.Get ("/movie/search", func(c *iris.Context) { 
var q = c.URLParam("q") 
var pathKey = fmt.Sprintf ("movie/search/%s",q) 


if result, exist := apiResultCache[pathKey]; exist { 
c.WriteString (result) 
return 


} 


DOUBAN_API_BASE,pathKey), nil,nil) 


var result = sim.HttpGet (fmt.Sprintf ("%s/movie/search?q=%s", DOUBAN_API_BASE,q), nil,nil) 


apiResultCache[pathKey] = result 
c.WriteString (result) 





path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/../lib5| 


下 面 对 上 述 代码 进行 说 明 。 














1) 第 一 行 代码 package controller 用 于 定义 包 名 为 controller。 为 了 便于 维护 ， 包 名 要 与 目录 同名 。 每 个 Go 程序 都 是 由 包 组 成 的 ， 关 于 包 的 概念 及 其 练习 代码 ， 参 见 本 书 的 17.1.2 节 。 








2) import 关 键 字 引入 了 三 个 类 库 ， 第 一 个 类 库 gopkg.in/kataras/iris.v6 是 iris web 引 擎 ， 该 文件 上 























的 是 sim.go 类 库 的 lib 


到 了 它 的 iris.Context。 第 二 个 类 库 http://www.hzcourse.com/resource/readBook? 
个 类 库 fmt 是 Golang 官 方 类 库 ， 它 是 处 理 字 符 串 打印 与 格式 化 的 类 库 。 关 于 import 关 




















a 
ap. 








Ko 





键 字 引 入 包 的 更 多 内 容 ， 参 见 本 书 的 17.1.2 节 。 


3) import 关 键 字 引入 类 库 有 两 种 方式 ， 一 是 基于 类 库 名 ， 如 上 面 的 第 一 个 和 第 三 个 引入 便 是 ; 二 是 基于 相对 目录 ， 如 上 面 的 第 二 个 引入 便 是 。 

















JER, H 























lib 类 方法 及 Web 站 点 所 需 的 核心 功能 。 





于 提供 常 





录 是 框架 的 核心 ， 的 工 
































4) 严格 来 讲 ，sim.go 并 不 是 一 个 纯粹 的 类 库 ， 而 是 一 个 帮助 初学 者 快速 建立 后 台 程序 的 工具 


下 面 这 行 代码 : 








const DOUBAN API BASE = "https://api.douban.com/v2" 




















const 是 Go 语言 定义 常量 的 关键 字 。 





于 定义 一 个 常量 ， 





下 面 这 行 代码 : 











a 
申 


a 





var apiResultCache = make (map[string] string) 











表示 使 





var 关 键 字 定义 一 个 变量 ， 

















make 是 Go 语言 的 关键 字 ， 其 在 这 里 的 作 
， 参 见 本 书 的 17.1.5 节 基本 类 型 。 





Go 语言 的 var 关 键 字 与 JS 中 的 var 含 义 相同 。 关 于 var 关 键 字 及 变量 的 更 多 内 容 ， 





参见 本 书 的 17.1.4 节 。 


是 新 建 一 个 字典 实例 。map[stringjstring 是 键 、 值 均 为 string 的 字典 ，string 是 Go 语言 的 字符 串 类 型 。 关 于 字典 类 型 map， 参 见 本 书 的 17.3.6 节 。 关 于 字符 




















的 内 在 机 制 。 在 这 个 函数 内 建立 接口 逻辑 ， 





文件 中 的 函数 func init () 将 会 自动 执行 ， 这 是 Go 语言 


器 ， 删 除 文件 即 可 。 





























在 函数 init 内 ， 调 有 


“/movie/subject/: 

















id” 中 ，“: id” 是 路 径 参 数 ，c.Param ("id") 是 获取 其 参数 值 。 





fmt.sprintf 是 字符 串 格式 化 函数 ，“%s” 表 示 接 收 一 个 文本 作为 参数 ， 在 上 下 文中 即 为 id。 





了 三 次 web.Get， 分 别 声 明了 三 个 接口 给 小 程序 使 用 。Web 内 嵌 的 站 点 引擎 是 在 文件 servcontrolleweb.go 中 定义 的 。 这 里 ， 三 个 接 





er 目录 下 新 增 类 似 的 Go 语言 文件 ; 移 除 控 





只 需 在 control 


可 以 免 去 与 其 他 部 分 的 耦合 。 增 加 控制 器 ， 











的 声明 是 类 似 的 ， 在 第 一 个 接 








下 面 这 段 代 码 : 





if result, exist := apiResultCache[pathKey]; exist { 
c.WriteString (result) 
return 




















于 从 字典 apiResultCache 中 检查 键 名 为 pathKey 的 键 值 是 否 存 在 。 在 Go 语言 中 ，if 条 件 控制 语句 不 使 用 括号 ” () ”， 这 一 点 与 JS 不 同 。 关 于 if 语 句 ， 参 见 本 书 的 17.2.2 节 。 








.WriteString 函 数 是 输出 字符 串 到 本 次 http 请 求 。 














下 面 这 行 代 码 则 表示 调用 sim.HttpGet， 请 求 豆瓣 Api: 








var result = sim.HttpGet (fmt.Sprintf("%s/%s", DOUBAN_API_BASE, pathKey) ,nil,nil) 





sim.HttpGet 有 三 个 参数 ， 第 一 个 是 url 地 址 ， 为 了 简单 起 见 ， 我 们 将 不 重要 的 页 码 、 起 始 数 都 略 去 了 。 第 二 个 参数 是 url 参 数 ， 本 请 求 示例 没有 该 参数 ， 所 以 传递 nl，nil 在 Go 语言 中 代表 空 对 象 。 第 三 
个 参数 是 一 个 header 字 典 ， 在 本 次 请 求 示例 中 仍然 传递 nil。 























apiResultCache[pathKey]=result 这 句 代码 ， 是 将 结果 存 进 apiResultCache 字 典 ， 以 便 下 次 直接 取 














接口 /movie/bang/: key” 与 接口 /movie/subject/: id” 类 似 ，bang 是 为 了 避免 路 径 冲 突 而 添加 的 。 























在 第 三 个 接口 “/movie/search” 中 ，c.URLParam ("q") 用 于 获取 url 参 数 q， 这 也 是 与 前 面 两 个 接口 c.Param ("key") 不 同 的 地 方 ， 除 此 以 外 ， 其 他 代码 均 与 前 面 类 似 。 


























douban.go 文 件 完成 编辑 之 后 ， 在 浏览 器 中 访问 http://localhost: 4000/movie/bang/in_theaters， 如 果 有 内 容 输 出 ， 则 说 明 后 端 程序 工作 了 。 














使 用 go 语言 编写 的 后 端 程序 ， 其 自身 即 可 提供 强大 有 效 的 Web 服 务 ， 性 能 不 输 于 Nginx、Apache、1IS 等 Web Server, 无须 再 另外 搭建 环境 。 而 且 Go 语 言 编译 的 二 进 制 文件 ， 对 类 库 无 依赖 ， 在 环境 
一 致 的 系统 上 部 署 时 ， 复 制 过 来 即 可 运行 ， 这 也 给 运 维 带 来 了 极 大 的 便利 。 相 比 之 下 ， 使 用 其 他 开发 语言 ， 例 如 Ruby、Python、Node、Java 等 ， 它 们 都 有 环境 依赖 ， 仅 是 配置 这 些 环境 就 是 一 道 不 小 的 门 
槛 ， 这 也 是 建议 初学 者 学 习 Go 语言 的 原因 之 一 。Go 语 言 对 于 初学 者 来 说 简单 易学 ， 已 广泛 应 用 于 各 行 各 业 。 















































7.2 ”改写 小 程序 前 端 




















使 用 微 信 开 发 者 工具 ， 打 开 第 2 章 的 豆 豆 电影 项 目 。 在 这 个 项 目 中 ， 有 5 个 地 方 调用 了 豆瓣 接口 ， 现 在 我 们 逐一 把 它们 换 成 适 才 所 写 的 本 地 接口 。 























在 文档 树 中 打开 pages/douban/splash.js 文 件 ， 将 函数 onLoad 中 的 : 





app. request ("https://api.douban.com/v2/movie/coming_soon?start=0écount=3") 





BARA: 





app. request ("http://localhost :4000/movie/bang/coming_soon?start=0écount=3") 





将 pages/douban/search.js 文 件 中 的 : 





app.request ('https://api.douban.com/v2/movie/search?q=$ {this.data.searchWords}&start=${start}&count=${this.data.size}') 





BARA: 





app. request ('http://localhost: 4000/movie/search?q=$ {this.data.searchWords}&start= ${start}&count=${this.data.size}') 





将 pages/douban/ylistjs 文 件 中 的 : 





app.request ('https://api.douban.com/v2/movie/${this.data.type}?start=${start}&count= ${this.data.size}') 








BARA: 





app. request ('http://localhost: 4000/movie/bang/${this.data.type} ?start=${start}&count= ${this.data.size}') 





将 pages/douban/item.js 文 件 中 的 : 





app.request ('https://api.douban.com/v2/movie/subject/$ {options.id}') 





BARA: 








app. request ("http://localhost : 4000/movie/subject/${options.id}"') 





将 pages/douban/index.js 文 件 中 的 : 





app.request ('https://api.douban.com/v2/movie/${board. key} ?start=0&count=10') 





BARA: 





app. request ('http://localhost:4000/movie/bang/${board. key} ?start=0&count=10') 





完成 以 上 蔡 换 工作 之 后 ， 项 目 已 经 不 再 直接 依赖 豆瓣 服务 器 的 接口 了 ， 在 微 信 小 程序 后 台 管 理 页 面 中 ， 可 以 将 服务 器 域名 “api.douban.com” 移 除了 。 











7.3 “下载 源码 











在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 
“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


: 下 载 作者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 豆 豆 电影 7.2” 获 取 下 载 地 址 。 服 务 端的 源码 在 小 程序 项 目的 server 目 录 中 。 


第 8 章 “计算 皮 相 服务 端 

















没有 数据 库 的 后 端 (服务 端 ) ， 不 是 真正 的 后 端 。 本 章 将 为 第 3 章 的 小 程序 项 目 “ 计 算 皮 相 ” 添 加 一 个 后 端 ， 实 现 分 用 户 存储 计算 历史 。 











8.2 ”改写 小 程序 前 端 




















使 用 微 信 开 发 者 工具 ， 打 开 第 3 章 的 计算 皮 相 项 目 ， 在 文档 树 中 打开 appjs 文 件 ， 于 app 的 声明 之 下 输入 如 下 三 行 代码 : 


let app = require("./sim.js/index.js") 
app.config.enableWeappUserAutoLogin = true 
app.config.serverUrlBase = "http://localhost:4001" 














其 中 ， 第 二 行 代码 将 在 app.getUserlnfo 函 数 中 开启 微 信 小 程序 用 户 自动 登录 服务 器 的 功能 ， 第 三 行 代码 是 设置 服务 器 接口 地 址 的 基地 址 。 

















8.2.1 使 用 POST 方法 新 增 数 据 








在 appjs 文 件 的 onLaunch 函 数 中 ， 添 加 对 app.getUserlnfo 函 数 的 主动 调用 ， 拉 取 用 户 信息 并 自动 登录 到 服务 器 ， 代 码 如 下 : 




















onLaunch: function() { 
app.getUserInfo () 


在 文档 树 中 打开 pages/index/index.js 文 件 ， 添 加 如 下 代码 : 


postNewRecord (record) { 
let app = getApp() 
app.request ('http://localhost:4000/history', { record: record }, { method: 'POST' }) 











该 函数 向 接口 http://localhost: 4000/history 发 起 一 个 POST 请 求 ， 并 发 送 数据 {record: record}， 这 是 数据 库 history 新 增 记录 需要 用 到 的 数据 。 


然后 在 函数 equalOperation 中 ， 找 到 如 下 两 行 代码 : 





this.data.logs.push(data + " = " + result); 
wx.setStorageSync("calclogs", this.data.logs); 








将 其 蔡 换 为 : 





this.postNewRecord(data + " = " + result) 





这 里 将 由 原来 的 在 小 程序 本 地 缓存 中 存储 记录 ， 改 为 发 送 给 服务 器 在 服务 端 数据 库 中 存储 。 


此 外 ， 在 pages/index/index.js 文 件 的 data 对 象 中 ，logs 数 组 已 不 再 需要 ， 可 以 删除 了 。 


8.2.2 ”调用 分 页 接口 拉 取 数据 


打开 server/controller/history.go 文 件 ， 找 到 “新 增 单条 记录 ”处 ， 往 下 看 会 发 现 有 这 样 两 行 代码 : 





var my = web.GetWeappUser (c) 
one.UserId = my.ID 
































Hh, web.GetWeappUser (c) 用 于 获取 当前 登录 的 小 程序 用 户 对 象 ， 下 一 行 代码 即 为 将 用 户 ID 赋 值 给 新 记录 的 Userld 字 段 。 





























在 文档 树 中 打开 pagesVindex/history.js 文 件 ， 将 onLoad 函 数 修改 为 : 





onLoad(options) { 
let app = getApp() 
app. request ('http://localhost:4000/historys') .then (res => { 
this.setData({ "logs": res.data.list }) 
H 








新 代码 会 向 服务 器 的 /historys 接 口 发 出 请 求 ， 拉 取 至 多 1000 条 记录 ， 然 后 将 history 列 表 赋 值 给 页 面 变量 |ogs 数 组 。 














在 文档 树 中 打开 pagesindex/history.wxml， 由 于 logs 数 组 不 再 是 字符 串 ， 而 是 对 象 数 组 ， 因 此 将 列表 演 染 的 标签 代码 修改 为 : 











<view class="weui-cell" wx:for="{{logs}}" wx:key="id"> 


<view class="weui-cell_bd">{{item. record} }</view> 
</view> 











上 述 代码 实现 了 两 种 改动 : 一 是 修改 wx: key 为 jd，id 是 记录 项 主键 ， 在 列表 泻 染 中 可 作为 主键 ; 二 是 修改 原 item 为 item.record。 

















至 此 就 实现 了 计算 皮 相 项 目的 服务 器 端 程序 。 每 次 计算 的 结果 都 将 自动 存 和 数据库 中 ， 单 击 “ 历 史 页 面 ”， 将 会 看 到 所 有 历史 记录 。 

















8.3 TEORA 











在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 
+ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信和 扫描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作 者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 计 算 皮 相 8.2” 获 取 下 载 地 址 。 服 务 端的 源码 在 小 程序 项 目的 server 目 录 中 。 


第 9 章 ” 黑 黑 天 气 服务 端 












































本 章 将 为 第 4 章 介 绍 的 小 程序 “ 黑 黑 天 气 ” 添 加 一 个 服务 端 ， 用 于 存储 历史 上 查询 过 的 天 气 。 具 体 实 现 方式 为 : 将 原来 使 用 ip 查 询 城 市 的 方法 ， 修 改 为 调用 微 信 小 程序 获取 地 理 位 置 的 接口 ， 先 获取 经 纬 
度 信息 ， 再 以 经 纬度 信息 调用 谷歌 地 理 接口 获取 城市 名 称 ， 并 新 增 一 个 history 页 面 ， 用 于 展示 查询 过 的 天 气 记录 。 


























































































































在 技术 上 ， 本 章 将 主要 介绍 前 端 与 后 端 在 JSON 数 据 交互 、 处 理 上 的 一 些 实用 技巧 ， 例 如 动态 JSON 数 据 的 解析 、 使 用 字典 类 型 等 。 前 端 与 后 端的 数据 交换 格式 ， 除 了 JSON， 还 有 XML、 
SocketMessage 等 ， 但 以 JSON 最 为 简单 、 高 效 、 易 学 ， 初 学 者 通晓 JSON 这 一 个 数据 格式 就 足以 应 对 所 有 情况 了 。 











完成 后 的 运行 效果 截图 如 图 9-1 所 示 。 
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图 9-1 


9.1 “创建 服务 端 程序 





本 节 将 实现 用 sim.go 创 建 一 个 Web 接 口 站 点 ， 并 启动 该 站 点 ， 提 供给 前 端 小 程序 使 用 。 




















打开 第 4 章 的 项 目 黑 黑 天 气 ， 在 根 目录 下 创建 一 个 server 目 录 ， 在 命令 行 下 执行 cd 命令 ， 转 到 该 目录 ， 输 入 如 下 指令 : 
































git clone https://github.com/rixingyike/sim.go.git ./ 





然后 参照 8.1.1 节 ， 修 改 config.init 文 件 中 的 sqlite3 与 weapp 段 落 ， 代 码 如 下 所 示 : 





[sqlite3] 
enable = true 
filepath = "./sqlite3.db" 


[weapp] 
enable = true 

app_id = "wx7dca91c025113d48" 
app_secret = "小 程序 密 钥 " 























之 后 ， 开 启 sqlite3 数 据 库 与 小 程序 用 户 自动 登录 服务 器 的 功能 (注意 ， 请 将 代码 中 的 “小 程序 密 铀 ”替换 为 自己 的 密 钥 ) 。 


























执行 debug.sh 脚 本 ， 启 动 Web 站 点 并 开启 热 编 译 。 








在 浏览 器 中 打开 http://localhost: 4000/hi， 如 果 有 内 容 输出 ， 则 说 明 站 点 启动 成 功 。 


9.1.1 ”使 用 万 能 的 JSJON 字 段 








本 节 将 创建 History 数 据 模 型 ， 用 于 存储 从 小 程序 前 端 发 送 过 来 的 历史 数据 。 

















将 第 8 章 项 目 中 的 server/controller/history.go 文 件 复制 到 本 章 项 目的 server/controller 目 录 下 。 打 开 server/controller/history.go 文 件 ， 将 数据 模型 History 修 改 为 : 





History struct { 
sim.Model `xorm: "extends" 
UserId int64 *json:"user_id"~ 
Record map[string]string ~xorm:"json" json:"record"” 


} 





这 里 与 原 History 的 差别 不 大 ， 仪 改动 了 两 个 地 方 。 











1) 修改 字段 Record 的 Tag 声 明 ， 如 上 面 的 代码 所 示 ， 设 置 “xorm” 为 “json”。 也 就 是 说 ， 在 存储 时 ， 先 将 本 字段 序列 化 为 JSON 字 符 串 ; 取出 时 与 之 相反 ， 先 将 Record 字 段 反 序列 为 mnap 对 象 。 这 
个 序列 化 、 反 序列 化 的 过 程 是 由 框架 自动 完成 的 。 
































2) 将 Record 字 段 的 数据 类 型 ， 由 字符 串 修改 为 字典 ， 以 便于 存储 丰富 的 结构 化 信息 。 


9.1.2 ” 特 改 特定 的 接口 逻辑 


找到 “新 增 单条 记录 ”的 接口 ， 看 到 下 面 这 两 行 代码 : 








var my = web.GetWeappUser (c) 
one.UserId = my.ID 


之 后 添加 : 


// 检 查 当 天 的 天 气 是 否 已 经 记录 过 

var now = time.Now() 

var todayStartTime = time.Date (now. Year () ,now.Month(),now.Day(),0,0,0,0,now. Location () ) 
var tomorrowStartTime = todayStartTime.AddDate (0,0,1) 


if exist,err := web.DB.Where ("created < ? and created > ? and user_id = ?", tomorrowStartTime, todayStartTime, my.ID) .Get(&one); err == nil && exist { 
// 如 果 已 存在 当天 记录 
r.Code = -2 
r.Message = "record exist" 
c.JSON(200, r) 
return 





这 段 代码 首先 获取 当前 时 间 ，time.Now () 返回 当前 时 间 ， 然 后 根据 当前 时 间 ， 算 出 今日 之 零点 时 间 todayStartTime， 接 着 使 用 AddDate 方 法 添加 1 天 时 间 ， 算 出 tomorrowstartTime， 最 后 检查 在 
这 个 时 间 段 之 内 有 无 记录 ， 并 且 要 求 user_id 等 于 当前 用 户 ID。 

















从 上 面 的 代码 可 以 看 出 ， 笔 者 可 以 独立 地 修改 每 个 控制 器 中 每 个 接口 的 代码 逻辑 ， 这 是 sim.go 框 架 的 便利 之 一 ， 各 个 控制 器 处 于 完全 松 耘 合 的 状态 ， 在 程序 升级 和 改造 时 可 以 最 大 限度 地 避免 对 其 他 部 
分 产生 影响 。 





9.1.3 ”解析 动态 JSON 数 据 的 方法 








本 节 将 展示 在 Go 语言 开发 中 ， 如 何 解析 动态 的 JSON 数 据 。 在 Go 语言 中 ， 解 析 JSON 数 据 的 基础 方法 是 ， 首 先 声 明 一 个 与 目标 数据 结构 相同 的 结构 体 ， 然 后 使 用 son.Unmarshal 方 法 将 数据 反 序列 化 至 
一 个 结构 体 实例 中 ， 以 此 来 实现 对 JSON 数 据 的 解析 。 基 础 的 解析 方法 如 下 面 的 代码 所 示 : 








type Student struct { 
Name string 
Age int 
Guake bool 
Classes []string 
Price float32 
} 
var jsonStr = `{"Name" :"Weapp", "Age":16, "Guake": true, "Classes": ["Math", "English"], "Price":9.99}~ 
var student Student 
json.Unmarshal ([]byte(jsonStr), &student) 











不 过 ， 基 础 的 解析 方法 仅 在 明确 知道 目标 数据 结构 的 前 提 下 适用 ， 下 面 笔者 示范 一 下 在 不 知道 目标 数据 的 结构 ( 即 目 标 数据 是 动态 JSON) 的 情况 下 如 何 实现 解析 。 























在 server/controller 目 录 下 ， 添 加 city.go 文 件 ， 代 码 如 下 : 














import ( 
Oe pa he] opeiresdorces/ieadi ebook/uncompressed/17282/OEBPS/Text/../lib" 
"gopkg.in/kataras/iris.v6" T 
"fmt" 
) 
func init() { 
web.Get ("/city", func(c *iris.Context) { 
var r sim.Result 
var longitude = c.URLParam("1ng") 
var latitude = c.URLParam("lat") 


var apiUrl = fmt.Sprintf ("http://maps.google.cn/maps/api/geocode/json?lat1ng=%s, 3s&language=CN", latitude, longitude) 
var jsonResult = sim.HttpGet (apiUrl,nil,nil) 


if doc,err := sim.ParseJsonToDocument (jsonResult); err == nil { 


if results,err := doc.Path("results") .Children();err == nil && len(results)>0 { 
var result = results[0] 
var addresses, = result.Path("address_ components") .Children () 
for _,address := range addresses { ~ 
var types, = address.Path("types") .Children () 
if types [0] . Data () . (string) == "locality" { 
r.Code =1 
r.Data = address.Path ("long_name") .Data () . (string) 


} 


} 
c.JSON (200, r) 
H 








在 controller 目 录 下 ， 每 一 个 文件 定义 一 个 控制 器 ， 控 制 一 段 路 由 。city.go 文 件 扩展 了 一 个 新 的 控制 器 ， 这 个 控制 器 仅 包括 一 个 接口 “/city”。 在 这 个 接口 中 ， 首 先 通过 c.URLParam 获 取经 纬度 参数 ， 
然后 调用 谷歌 的 地 理 逆向 接口 ， 传 入 经 纬 值 ， 从 而 得 到 城市 信息 。 


























从 谷歌 的 地 理 接口 中 返回 的 数据 是 这 样 的 : 


回 








"results" : [ 


"address_components" : [ 
{ 
"long_name" : "格尔木 市 "， 


"short_name" : "格尔木 市 "， 

"types" : "political", "sublocality", "sublocality_level_1" ] 
ty 
{ 

"long_name" : " 海 西 蒙古 族 藏族 自治 州 "， 

"short name" : " 海 西蒙 古 族 藏族 自治 州 "， 

"types" : "locality", "political" ] 
hy 
{ 

"long_name" : "HHA", 

“short name" : "HH", 

"types™ $ "administrative_area_level_1", "political" ] 
] 
{ 

"long_name" : " pH", 

"short name" : "CN", 

"types" : "country", "political" ] 





} 
l; 
"formatted address" : "中 国 青 海 省 海 西 蒙古 族 藏 族 自治 州 格尔木 市 "， 


"geometry" : {http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...}, 
"place id" : "ChIJ2YYhWlaPmDcRUDYWZYvs_-Q", 
"types" : [ "political", "sublocality", "sublocality_level_1" ] 


] 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


l; 
"status" : "OK" 


在 浏览 器 中 打开 http://maps.google.cn/maps/api/geocode/json? latlng=36，92&language=CN， 可 以 看 到 以 上 结果 。 


然后 在 谷歌 接口 返回 的 JSON 内 容 中 ， 获 取 到 州 、 市 级 别 的 城市 名 称 ， 即 types 数 组 中 第 一 个 元 素 为 locality 的 数据 。 























为 了 方便 逐 级 查询 节点 ， 避 免 定义 结构 体 的 麻烦 ， 可 使 用 sim.ParsejsonToDocument 工 具 方法 将 JSON 内 容 解析 为 一 个 树 状 文档 对 象 。 该 文档 对 象 的 Path 方 法 会 返回 指定 路 径 的 节点 ， 可 以 这 样 使 用 : 





doc. Path ("outter.inner.valuel") 





函数 Children () 返回 节点 的 数组 形式 ， 例 如 result.Path ("address components") .Children () 将 返回 address components 节 点 的 4 个 子 节点 。 























值 ， 其 值 是 字符 串 类 型 ， 后 者 是 将 节点 转换 为 字 











需要 特别 指出 的 是 ， 代 码 “types[0].Data () . (string) ”返回 的 是 字面 值 , 但 “types[0].String () ”返回 的 却 是 带 双 引 号 的 字面 值 。 前 者 代表 取 
PBs. 














如 上 所 示 ， 本 节 通 过 sim.go 类 库 自 带 的 sim.ParsejsonToDocument 方 法 实现 了 动态 JSON 数 据 的 解析 。sim.ParsejsonToDocument 方 法 是 基于 第 三 方 开源 类 库 实 现 的 ， 直 接 使 用 该 方法 ， 可 以 避免 引 
类 库 的 麻烦 。 






































9.2 ”改写 小 程序 前 端 














本 节 将 调用 在 9.1 节 实现 的 后 端 接口 ， 实 现 对 历史 记录 的 保存 。 



































使 用 微 信 开 发 者 工具 打开 第 4 章 的 小 程序 项 目 黑 黑 天 气 ， 在 文档 树 中 打开 appjjs 文 件 ， 在 app 变 量 声明 之 下 添加 如 下 两 行 代码 : 

















let app = require("./sim.js/index.js") 
app.config.enableWeappUserAutoLogin = true 
app.config.serverUrlBase = "http://localhost:4001" 

















在 小 程序 端 开启 用 户 自动 登录 服务 器 的 功能 ， 并 且 设 置 服务 器 接口 的 基地 址 。 如 果 将 程序 部 署 到 外 网 ， 那 么 这 个 地 址 需要 修改 为 线 上 地 址 。 








9.2.1 ”使 用 不 同 的 模拟 器 测试 项 目 




















如 果 使 用 iPhone5 的 模拟 器 测试 该 项 目 ， 会 发 现 主要 温度 的 UI 与 底 边 靠 得 太 近 ， 如 图 9-2 箭 头 所 示 。 




















ey, 星期 四 北京 市 





R RO 


但 这 个 问题 在 iPhone6 中 就 不 存在 ， 这 也 说 明 程 序 在 上 线 前 需 ， 





图 9-2 

















在 多 种 尺寸 下 进行 测试 。 





要 解决 上 述 问 题 ， 可 采用 如 下 方式 。 在 文档 树 中 打开 pages/indewindex.wxml 文 件 ， 找 到 文本 “34"*C” 所 在 的 view 视 图 ， 修 改 它 的 style 属 性 ， 如 下 所 示 : 























<view class="weui-flex" style="display: flex;align-items: center; position:absolute;bottom:0;width:100%;"> 
<view style="font-size:120rpx" class="weui-flex item"> 


{ {weather .wendu} }°C 
</view> 


<navigator url="history" style="text-align: center" class="weui-flex_item"> 


{{weather.today.week} } 
</navigator> 
</view> 


{{weather.city}} 
































粗 体 部 分 是 新 增 的 样式 代码 。 使 

















相对 于 父 容器 的 绝对 位 置 进行 布 





局 ， 距 父 容器 底部 为 0 并 将 宽度 设置 为 100%。 完 成 





ROAR, Mita 


网 











9-3 所 示 。 
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图 9-3 








修改 星期 与 城市 文本 的 组 件 类 型 为 navigator， 并 将 url 指 向 history 页 面 。history 页 面 将 显示 个 人 查看 天 气 的 历史 记录 。 


9.2.2 ”使 用 默认 的 页 面 数据 避免 泻 染 错误 














在 小 程序 测试 过 程 中 ,发现 Console 面 板 会 报告 图 9-4 所 示 的 错误 。 














© PF Failed to load image http://318341983.debug.open.weixin.qq.com/static/image/background/.jpg : the 
server responded with a status of 404 (HTTP/1.1 404 Not Found) 
From server 127.0.0.1 


Y Thu Jul 13 2017 15:40:38 GMT+0800 (CST) 演 染 层 网 络 层 错误 


© >» Failed to load image http://318341983.debug.open.weixin.qq.com/static/image/white/.png : the server 
responded with a status of 404 (HTTP/1.1 404 Not Found) 
From server 127.0.0.1 


图 9-4 


这 是 由 于 在 pages/index/index.wxm| 文 件 中 ， 绑 定 了 变量 {{weather.today.typeBackgorund}} 与 {{weather.today.type}}， 代 码 如 下 : 








background-image: url('/static/image/background/{ {weather.today.typeBackgorund}}.jpg') 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
src="/static/image/white/{{weather.today.type}}.png" 























但 是 在 程序 运行 伊始 ， 这 两 个 变量 并 不 存在 ， 在 天 和 气 数据 正确 加 载 之 前 ， 页 面 已 经 发 生 了 演 染 。 最 简单 的 解决 办 法 是 修改 页 面 初始 数据 对 象 data， 并 在 对 象 weather 里 添加 一 个 默认 的 today 变 量 ， 代 
码 如 下 : 








weather: { 
today: { type: "多 云 "，typeBackgorund: "default" } 
} 





其 中 ， 粗 体 部 分 是 新 增 的 代码 。 再 次 刷新 项 目 ， 错 误 已 不 存在 。 


9.2.3 ”分离 代码 逻辑 提高 可 阅读 性 








当 一 个 函数 的 行 数 过 多 时 ， 一 般 需 要 对 它 进 行 拆 分 ， 以 保持 代码 的 可 阅读 性 和 可 维护 性 。 代 码 是 给 机 器 用 的 ， 却 是 给 程序 员 读 的 。 不 要 因为 一 时 的 懒惰 或 页 酷 而 将 代码 写 得 难于 理解 。 有 些 当时 看 起 来 
很 酷 的 代码 ， 过 几 个 月 之 后 可 能 连 自 己 都 看 不 懂 了 。 最 好 的 代码 ， 是 一 眼 就 能 看 明白 的 代码 。 本 节 正 好 会 涉及 一 个 行 数 过 多 的 函数 ， 笔 者 将 示范 如 何 依据 其 业务 逻辑 将 之 分 离 为 不 同 的 函数 。 


























在 文档 树 中 打开 pagesVindex/index,js 文 件 ， 在 onLoad 函 数 上 方 新 增 postTodayWeather 函 数 ， 代 码 如 下 : 





postTodayWeather (record) { 
let app = getapp () 


app.request ("http://localhost:4000/history', { record: record }, { method: 'POST' }) 














该 函数 负责 将 一 条 新 的 查看 记录 保存 到 服务 器 ， 是 数据 新 增 操作 ， 其 与 第 8 


所 有 新 增 的 函数 ， 默 认 放 在 函数 





计算 


区 项 部。 修改 之 后 的 loadWeather 函 数 如 下 所 示 : 





皮 相 保存 计算 记录 的 函数 类 似 (参见 本 书 8.2.1 节 的 第 2 段 代 码 ) ， 可 将 该 段 代码 复制 过 来 ， 在 此 基础 之 上 进行 修改 。 





loadWeather() { 








ii 

// 查询 地 理 位置 

let requestLocation 
wx.getLocation ({ 


= { 
type: 'wgs84', 
success: function 
var latitude = res.latitude 
var longitude = res.longitude 
requestCity (latitude, longitude) 


(res) { 


H) 


} 
// let vequestCity = app.request ('http://int.dpool.sina.com.cn/iplookup/iplookup. php?format=json') 


// 根据 地 理 信 息 查询 城市 
let requestCity = (latitude, longitude) => { 
wx.showLoading({ title: "加 载 中 " }) 





let requestCity = app.request (“http://localhost:4000/city?lat=${latitude} &lng=${longitude}*).then(res => { 


var city = res.data 
requestWeather (city) 
}) .catch(() => { wx.hideLoading() 


} 

// 根据 城市 查询 天 气 
let requestWeather 
var weather = {}; 

weather.city = city; 


ʻi 


(city) => { 


app. request ('http://wthrcdn.etouch.cn/weather mini?city=${city}') .then (res => { 


console. 
if 


log (res) 
status === 1000) { 
data = res.data; 
forecast = data.forecast; 
futureList = []; 
(var i 0; i < forecast.length; i++) { 
var one = forecast [i]; 
var future = { 
week: one.date.slice(-3), 
type: one.type, 
wendu: one.low.split(' 


(res. 
var 
var 
var 
for 


} 
futureList .push (future) ; 


} 


var today = futureList[0]; 
console.log("type", background[today. type] ) 
if (background[today.type]) { 
today.typeBackgorund = background[today.type] ; 
} else { 
today.typeBackgorund = "default"; 
} 
weather.wendu = data.wendu 
weather.today = today 
weather.futureList = futureList.slice(1); 
this.setData ({ 
weather: weather 
he 
this .postTodayWeather (today) 


} 

wx.hideLoading () 
}).catch(() => { wx.hideLoading() }) 
} 


requestLocation () 


")[1] + "-" + one.high.split(' ') 


// 天 气 特 征 与 未 来 天 气 


[11] 























原 函 数 的 逻辑 分 为 两 步 : 先 根据 ip 地 址 查询 所 在 城市 ， 再 以 城市 查询 天 气 信息 。 
新 函数 将 逻辑 扩展 为 了 三 步 : 首先 调用 小 程序 的 地 理 接口 wx.getLocation， 获 取 上 


























息 。 








户 所 在 地 区 的 经 纬 























度 ; 其 次 以 经 纬度 信息 调 有 





9.1 节 新 增 的 服务 端 接口 获取 城市 名 称 ; 最 后 再 以 城市 名 称 拉 取 天 气 信 














两 个 函数 最 后 一 步 的 逻辑 是 相同 的 ， 可 以 保持 代码 不 变 。 另 外 ， 为 了 使 代码 便于 阅读 和 维护 ， 可 将 新 代码 的 三 步 逻 辑 分 别 定义 为 如 下 三 个 命名 函数 : requestLocation、requestCity、 


requestWeather。 这 三 个 函数 均 定义 于 函数 之 中 ， 相 当 于 三 个 类 型 为 函数 的 变量 ， 可 以 像 普通 函数 一 样 调用 。 








由 于 数据 格式 修改 ， 原 代码 























var city = res.city 
BAT: 
var city = res.data 





此 外 ， 在 函数 requestWeather 内 部 ， 添 加 了 对 新 定义 函数 postTodayWeather 的 调 上 




















http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


this.setData ({ 
weather: weather 
he 
this .postTodayWeather (today) 











以 此 实现 查看 记录 的 保存 。 改 写 后 的 代码 更 易 阅读 。 


9.2.4 在 WXMLI 页 面 中 直接 绑 定 字典 数据 


























从 服务 器 返回 的 字典 类 型 的 数据 ， 在 小 程序 前 端 是 Object 对 象 ， 因 此 不 需要 做 任何 额外 的 工作 ， 即 可 直接 在 视图 
使 用 2.1.3 节 介绍 的 快捷 创建 页 面 的 方法 ， 创 建 pages/index/history 页 殖 
































中 绑 定 对 象 的 





属性 ， 这 为 开发 带 来 了 很 大 的 便利 。 


。 在 文档 树 中 打开 pages/index/history.wxm| 文 件 ， 将 标签 代码 替换 为 : 





<view class="weui-cells"> 
<view wx:for="{{histories}}" wx:key="id" class="weui-cell"> 
<view class="weui-cell_bd">{{item.record.wendu}}, {{item. record. type} }</view> 
<view class="weui-cell £t">{{item.record.week}}</view> 
</view> = 
</view> 









































这 里 会 涉及 在 9.1.1 节 新 增 的 数据 模型 History， 其 Record 字 段 是 map 类 型 ， 但 仍然 可 以 像 使 用 属性 一 样 使 用 其 键 值 ， 而 不 必定 义 太 多 字段 ， 免 去 了 麻烦 。 


在 文档 树 中 打开 pages/index/historyjs 文 件 ， 将 内 容 蔡 换 为 如 下 代码 : 





Page ({ 
data: { 
histories: [] 
hr 
onLoad(options) { 
let app = getApp() 
app. request ("http://localhost:4000/historys').then(res => { 
console. log (res) 
this.setData({ "histories": res.data.list }) 
D) 








该 页 的 代码 与 第 8 章 的 项 目 计算 皮 相 中 pages/index/historyjs 文 件 中 的 代码 类 似 ， 可 以 复制 过 来 在 其 基础 上 进行 修改 。 


在 文档 树 中 打开 pages/index/historyjson 文 件 ， 将 页 面 标题 修改 为 “查询 历史 ”， 代 码 如 下 所 示 : 





{ 
"navigationBarTitleText": "查询 历史 " 
i 








至 此 ， 所 有 前 端 、 后 端的 代码 都 已 经 完成 了 。 刷 新 项 目 ， 就 可 以 看 到 与 笔者 截图 








T 








9-1) 相同 的 运行 效果 。 





9.3 ”下 载 源码 





在 本 节 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 


“ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思 维 ”， 发 送 “ 小 程序 ” 进 群 。 


第 10 章 笑 林 百 家 服 务 端 














七 牛 云 存储 是 国内 Go 语言 大 牛 许 式 伟 创 立 的 公司 ， 新 人 注册 即 享有 10GB 的 免费 存储 空间 ， 对 初学 者 来 说 完全 够 用 。 使 用 云 存 储 ， 可 以 在 提升 资源 访问 速度 的 同时 有 效 减少 运 维 成 本 的 投入 ， 尤 其 适用 
于 创业 公司 、 中 小 企业 ， 更 适用 于 个 人 。 


























本 章 将 为 第 5 章 介 绍 的 小 程序 “ 笑 林 百 家 ” 添 加 一 个 顶部 导航 栏 ， 并 调用 七 牛 云 存 储 的 API 实 现 图 片上 传 。 完 成 后 的 效果 如 图 10-1 所 示 。 


笑 林 百 家 eee 














请 输入 文本 








图 10-1 


10.1 ”创建 服务 端 程序 








本 节 会 为 小 程序 “ 笑 林 百 家 ”创建 一 个 后 端 程序 ， 辅 助 前 端 将 图 片上 传 至 七 牛 云 存储 。 不 通过 服务 器 中 转 ， 而 是 由 客户 端 直接 上 传 ， 可 以 减少 服务 器 的 压力 和 带宽 的 占用 ， 从 而 有 效 提高 整体 的 用 户 体 
验 。 此 外 ， 涉 及 密 钥 等 机 密 信息 也 不 适宜 存储 在 前 端 ， 只 适合 存储 在 服务 端 。 在 项 目 中 使 用 其 他 第 三 方 类 库 时 ， 应 采用 同样 的 策略 。 























打开 “ 笑 林 百 家 ”小 程序 ， 在 根 目录 下 创建 一 个 server 目 录 ， 在 命令 行 下 执行 cd 命令 ， 转 到 该 目录 下 ， 输 入 并 执行 如 下 指令 : 








git clone https://github.com/rixingyike/sim.go.git ./ 





然后 参照 8.1.1 节 修改 config.init 文 件 中 sqlite3 与 weapp 的 代码 段落 ， 如 下 所 示 : 





[sqlite3] 
enable = true 
filepath = "./sqlite3.db" 


[weapp] 


enable = true 
app_id = "wx7dca91c025113d48" 
app_secret = "小 程序 密 钥 " 


[qiniu] 

enable = true 

scope = "七 牛 空间 名 " 
access_key = "七 牛 ACCESS KEY" 
secret_key = "七 牛 SECRET KEY" 
watermark = "" 

server_base = "" 








开启 sqlite3 数 据 库 ， 与 小 程序 用 户 自动 登录 服务 器 的 功能 。 注 意 ， 请 将 代码 中 粗 体 的 “小 程序 密 钥 ” 替 换 为 自己 的 密 钥 。 








10.1.1 启用 七 牛 云 上 传 功 能 


在 配置 文件 的 qiniu 段 落 中 ， 将 enable 设 置 为 true， 代 表 开启 七 牛 云 上 传 。 而 scope、access_key 和 secret_key 则 是 实现 上 传 功能 的 必需 字段 。 






































配置 文件 中 的 qiniu 一 server_base 是 生产 环境 用 到 的 七 牛 空间 的 个 性 域名 ， 在 开发 环境 中 默认 会 取 用 七 牛 的 测试 域名 7xndm1.com1.z0.glb.clouddn.com。 
10.1.2 注册 七 牛 账号 与 创建 存储 空间 


本 节 将 主要 介绍 七 牛 网 站 的 使 用 ， 为 使 用 七 牛 上 传 接口 准备 必要 的 信息 。 


在 浏览 器 中 打开 https://www.qiniu.com， 按 提示 注册 并 登录 。 首 先 ， 打 开 对 象 存储 链接 https://portal.qiniu.com/bucket， 单 击 “ 新 建 存储 空间 ”按钮 ， 出 现 图 10-2 所 示 的 界面 。 


存储 空间 名 称 存储 空间 名 称 作为 唯一 的 Bucket 识别 符 ， 遇 到 冲突 请 更 换 名 称 。 
名 称 由 4 ~ 63 个 字符 组 成 ， 可 包含 字母 、 数 字 、 中 划 线 。 


| 














存储 区 域 北美 区 域 尚未 支持 自 定义 数据 处 理 服 务 ， 一 旦 创建 区 域 无 法 修改 ， 请 谨慎 选择 。 
华南 区 域 相关 文档 

访问 控制 公开 和 私有 仅 对 Bucket 的 读 文件 生效 ， 修 改 、 删 除 、 写 入 等 对 Bucket 的 操作 均 需 要 拥有 者 的 授权 才 
能 进行 操作 。 





公开 空间 | O nasa 








10-2 











图 10-2 中 出 现 的 “存储 空间 名 称 ”， 即 配置 文件 config ini 中 的 qiniu-scope 字 段 。 











创建 存储 空间 之 后 ， 单 击 右上 角 的 “控制 面板 ”按钮 ， 选 择 密 钥 管理 ， 如 图 10-3 所 示 。 


数据 统计 E) 文档 中 心 工 单 Q 站 内 信 





liyi@rixingyike.com 
账户 余额 : ¥ 10.00 


立即 充值 





2 = B 
个 人 中 心 财务 中 心 数据 统计 密 钥 管理 


2 8 
问答 社区 邀请 好 友 


图 10-3 





在 密 钥 管 理 页 面 将 看 到 要 找 的 AK 和 SK， 如 图 10-4 所 示 。 
创建 时 间 AccessKey/SecretKey 


AK: a ED 


2015-10-09 
SK: See eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
图 10-4 


这 里 的 AK 与 SK 对 应 于 config.ini 中 的 qiniu-access_key 和 qiniu-secret_key， 这 两 个 字段 是 机 密 信息 ， 只 在 服务 器 上 存储 ， 要 注意 保密 。 





最 后 ,执行 debug.sh 脚 本 ， 启 动 Web 站 点 并 开启 热 编译 。 在 浏览 器 中 打开 http://localhost: 4000/hi， 如 果 有 内 容 输出 ， 则 说 明 服务 端 程序 启动 成 功 。 


10.1.3 ”Go 语言 的 作用 域 





本 节 将 主要 介绍 Go 语言 的 作用 域 ， 以 及 sim.go 类 库 是 利用 作用 域 的 限制 提升 编码 安全 性 的 方法 。 

















首先 ， 打 开 命 令 行 终端 ， 执 行 cd 命令 到 server/controller 目 录 ， 在 blog.go 的 基础 上 新 建 joke.go 文 件 : 








cd 笑 林 百 家 /server/controller 
cp blog.go joke.go 





然后 ， 打 开 joke.go 文 件 ， 首 先 修改 结构 体 的 定义 ， 代 码 如 下 所 示 : 





type ( 
Joke struct { 
sim.Model 'xorm:"extends"' 
UserId int64 'json:"user_id"' 


Title string 'xorm:"char(50)" json:"title"' 
Content string 'xorm:"text" json:"content"' 
Image string 'xorm:"tinytext" json:"image"' 


} 
JokePage struct { 





List []Joke ~json:"list"' 

Size int 'json:"size"' 

Page int 'json:"page"™' ”// 自 1 开始 计数 
Count int 'json:"count"' 


wt 


TotalPage int 'json:"total_page 






























































其 中 ， 粗 体 是 修改 和 新 增 的 部 分 。 将 结构 体 的 名 称 修改 之 后 ， 因 为 这 两 个 结构 体 默认 是 在 init 函 数 内 部 定义 的 ， 外 部 不 可 见 ， 所 以 下 面 关于 接口 实现 的 代码 自然 就 会 出 错 。 在 Webstorm 编 辑 器 中 ， 引 
不 存在 的 结构 体 ， 代 码 会 高 亮 显 示 ， 在 joke.go 文 件 中 很 容易 找 出 出 错 的 名 称 ， 可 将 之 蔡 换 为 新 的 结构 体 名 称 。 这 是 将 结构 体 定义 在 init 内 部 的 便利 。 
































如 果 控 制 器 中 的 某 结构 体 ， 需 要 对 外 可 见 ， 将 其 移 到 init 函 数 外 部 即 可 。 定 义 在 init 函 数 内 部 、 外 部 只 是 作用 域 不 同 ， 对 性 能 并 无 影响 。 











在 jioke.go 文 件 中， 找到 “分 页 拉 取 记录 ”接口 ， 去 掉 查 询 数据 的 Where 语句 ， 代 码 如 下 : 











sub.Get (fmt.Sprintf("/%ss", MODEL NAME), func(c *iris.Context) { 
var r sim.Result 


var page, = c.URLParamInt ("page") 
var size,_ = c.URLParamInt ("size") 
if page == 0 { 

page = 1 
if size = 0 { 

size = 1000 


} 

var data = JokePage{Page:page, Size:size} 
var offset = (data.Page - 1) * data.Size 
var my = web.GetWeappUser (c) 


if err := web.DB.Desc ("id") .Where("user id = ?", my.ID).Limit (data.Size, offset) .Find(&data.List); err == nil { 
if total, err := web.DB.Where("user_id = ?", my.ID) .Count (mew(Joke)); err == nil { 
data.Count = int (total) 
data.TotalPage = int (math.Ceil(float64 (total) / float64(data.Size) )) 
jelse{ 
sim.Debug("select count err", err.Error()) 
} 
for k,v := range data.List{ 
web.DB.ID(v.UserId) .Get (&v.User) 
data.List[k].User = v.User 
} 


r.Code = 1 
r.Data = data 
jelse{ 


sim.Debug("select page err", err.Error()) 


} 


c.JSON (200, r) 
H) 








其 中 的 粗 体 是 要 删除 的 代码 。 因 为 要 从 /jokes 接 口 拉 取 所 有 用 户 上 传 的 笑话 ， 所 以 不 关心 用 户 ID。 


另外 ， 要 注意 将 MODEL_NAME 修 改 为 oke， 这 是 容易 忽视 的 地 方 ， 修 改 后 代码 如 下 : 





const MODEL NAME = "joke" 





10.2 ”修改 小 程序 前 端 














本 节 将 主要 调用 10.1 节 中 创建 的 后 端 接口 ， 在 前 端 实现 图 片 的 上 传 和 记录 保存 功能 。 






































使 用 微 信 开 发 者 工具 ， 打 开 “ 笑 林 百 家 ” 小 程序 。 在 文档 树 中 打开 appjs， 将 内 容 蔡 换 为 如 下 代码 : 











let app = require("./sim.js/index.js") 
app.config.enableWeappUserAutoLogin = true 
app.config.serverUrlBase = "http://localhost:4000" 


App (Object .assign (app, { 
onLaunch() { 
app.getUserInfo () 
} 
})) 








其 中 的 粗 体 部 分 是 新 增 的 代码 。 



































在 以 上 代码 中 ，serverUrlBase 无 论 是 使 用 http://localhost: 4000， 还 是 使 用 http://localhost: 4001， 效 果 是 一 样 的， 因为 使 用 gin 工 具 代 理 服务 端 程 序 实现 热 编译 时 ， 服 务 端 程序 本 身 使 用 的 是 4001 
端口 ，gin 工 具 使 用 的 是 4000 端 口 ， 两 个 接口 提供 的 功能 是 相同 的 。 







































































参见 server/debug.sh 代 码 ， 如 下 所 示 : 





gin -a 4001 -p 4000 run main.go 



































这 里 的 参数 -a 表 示 app， 指 示 main.go 程 序 使 用 的 端口 ; 参数 -p 表 示 port， 指 示 gin 启 用 的 端口 。 




















10.2.1 ”使 用 模板 组 件 实现 顶部 导航 栏 
































在 文档 树 中 选择 pages/index 目 录 ， 添 加 一 个 .wxml 文 件 ， 如 图 10-5 所 示 。 


@ lis: SAAR .. app.json x t 


A <!--page 
d i pages 2 <inclunne 


v 高 index Mm 硬盘 打开 
image.js | 
image.json + 新 建 
<> image.wxml u 目录 
{ } image.wxss 
index.js 
index.json js 
<> index.wxml 


项 目 à = json 
{ } index.wxss 


<> navbar.wxml <> .wxml 

<> template.wxml P EE 

» M server 

» B sim.js 

编译 > Ba static = 删除 
app.js 

app.json Q 查找 
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</> 


Page 


4% 重 命名 














将 该 文件 命名 为 navbar.wxml， 打 开 pages/index/navbar.wxml 文 件 ， 将 内 容 蔡 换 为 如 下 标签 代码 : 





<view class="weui-navbar"> 
<navigator url="index" class= vbar_ item {{activeIndex == 0 ? 'weui-bar_item_on' : ''}}"> 
ss=™ 


“weui-navb 
bar__title">Xif </view> 





i-navbar item {{activeIndex == 1 ? 'weui-bar_item_on' : ''}}"> 


e" class="weu: 
<view class="weui-navbar title"> 趣 图 </view> 











以 上 代码 定义 一 个 顶部 导航 栏 ， 包 含 两 个 标签 : “笑话 ”和 “ 趣 图 ”， 分别 指 向 相对 页 面 index 和 image。 变 量 activelndex 用 于 控制 当前 页 面 的 选中 样式 ， 需 要 在 逻辑 层 中 定义 。 

















现在 分 别 打 开 pages/index/index.js 和 pages/index/image.js 文 件 ， 在 页 面 数 据 data 中 添加 activelndex: 











其 中 的 粗 体 为 新 增 代码 。 


之 后 分 别 打 开 pages/index/index.wxml 和 pages/index/image.wxml 文 件 ， 在 顶部 添加 如 下 代码 : 





<include src="navbar.wxml"/> 





























以 上 代码 使 用 include 关 键 字 引入 了 pages/index/navbar.wxml 文 件 的 内 容 ， 相 当 于 复制 过 来 使 








接着 ， 分 别 在 两 个 文件 中 的 scroll-view 组 件 上 通过 样式 添加 边 距 ， 代 码 如 下 : 





<scroll-view style="height :100%;margin-top:50px" scroll-y bindscrolltolower= "loadMore"> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


</scroll-view> 











其 中 的 粗 体 为 新 增 代 码 。 完 成 后 的 效果 如 图 10-6 所 示 。 








笑 林 百 家 eee 


ia RE 
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刷新 项 目 ， 单 击 项 部 的 “导航 栏 ”按钮 却 没有 反应 ， 页 面 不 能 跳 转 。 为 什么 ”哪里 出 错 了 ? 





10.2.2 ”关于 navigator 组 件 的 open-type 属 性 











要 想 解决 10.2.1 节 出 现 的 问题 ， 必 须 先 了 解 navigator 组 件 的 open-type 属 性 。open-type 属 性 共有 5 个 有 效 值 ， 具 体 如 下 。 
- navigate: 保留 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 。 
“redirect: 关闭 当前 页 面 ， 跳 转 到 应 用 内 的 菜 个 页 面 。 
“switchTab: 跳 转 到 tabBar 页 面 ， 并 关闭 其 他 所 有 非 tabBar 页 面 。 
“ reLaunch: 关闭 所 有 页 面 ， 打 开 到 应 用 内 的 某 个 页 面 。 


- navigateBack: 关闭 当前 页 面 ， 返 回 上 一 页 面 或 多 级 页 面 。 





属性 设置 为 switchTab 才 可 以 正常 工作 。 关 于 navigator 组 件 的 更 多 信 




















只 有 switchTab、reLaunch 可 以 跳 转 到 tabBar 页 面 。 在 10.2.1 节 的 顶部 导航 栏 中 ， 要 切换 的 页 面 是 tabBar 页 面 ， 只 有 将 open-type 


x 


息 ， 参 见 本 书 的 14.1 节 。 





在 文档 树 中 打开 pages/index/navbar.wxmlI 文 件 ， 修 改 navigator 组 件 ， 添 加 open-type 属 性 ， 代 码 如 下 : 


<navigator url="index" open-type="switchTab" class="weui-navbar__item {{activeIndex == 0 ? 'weui-bar_item_on' : ''}}"> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 

</navigator> p 

<navigator url="image" open-type="switchTab" class="weui-navbar__item {{activeIndex == 1 ? 'weui-bar_ item on' : ''}}"> 


http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
</navigator> 























在 navigator 中 使 用 的 url 地 址 ， 如 果 在 tabBar 中 使 用 了 ， 则 必须 添加 属性 open-type 为 switchTab， 否 则 代码 不 能 正常 工作 。 


10.2.3 在 tabBar 中 新 增 操作 按钮 














图 片 ， 保 存 至 static/image/icon 目 录 下 ， 如 图 10-7 所 示 。 














在 浏览 器 中 打开 网 站 http://www.flaticon.com/， 参 照 5.3 节 的 方法 ,分 别 检索 “plus” 和 “image”， 找 到 合适 的 





plus.png image.png 


图 10-7 














在 文档 树 中 打开 appjson 文 件 ， 于 左右 tab 中 间 添 加 一 个 新 的 页 面 ， 代 码 如 下 : 





"pagePath": "pages/index/index", 
笑 ue" 





“hextits: 7 

"iconPath": "/static/image/icon/joke.png", 

“selectedIconPath": "/static/image/icon/joke_on.png" 
hy 
{ 

"pagePath": "pages/index/new-record", 

"text": "BM", 

"iconPath": "/static/image/icon/plus.png", 


"selectedIconPath": "/static/image/icon/plus.png" 


"pagePath": "pages/index/image", 
"text": "iE", 

"iconPath": "/static/image/icon/funny.png", 
“selectedIconPath": "/static/image/icon/funny_on.png" 




















其 中 的 粗 体 为 新 增 代码 。 选 中 状态 与 非 选中 状态 使 用 的 是 同一 个 图 标 ， 看 起 来 更 像 是 按钮 。 效 果 如 图 10-8 所 示 。 




















笑谈 新 增 
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如 果 想 实现 中 间 的 图 标 比 其 他 略 大 的 效果 ， 可 以 修改 图 标 ， 对 中 间 图 标 采 用 小 边 距 ， 其 他 图 标 则 采用 大 边 距 。 



































10.2.4 使 用 icon 组 件 











使 用 快捷 方法 新 建 pages/index/new-record 页 面 ， 并 将 其 设置 为 首页 。 打 开 pagesindex/new-record.wxml 页 面 ， 将 内 容 蔡 换 为 如 下 代码 : 











<view class="weui-cells"> 
<view class="weui-cell"> 
<view class="weui-cell__bd"> 
<textarea bindinput="onInputJokeText" class="weui-textarea" placeholder= "请 输入 文本 " maxlength="200" style="height: 3.3em" /> 
<view class="weui-textarea-counter">200</view> 
</view> 
</view> 
</view> 
<view class="weui-btn-area" style="margin-top:20rpx"> 
<view class="weui-flex"> 
<view class="weui-flex item v-center"> 
<image bindtap="uploadImage" srco="/static/image/icon/image.png" style= "width: 60rpx;height : 60rpx;margin-right :10rpx"></image> 
<view wx:if="{{newJoke.image}}"><icon type="success_no circle" size="16"></icon> 已 上 传 </view> 
</view> 
<view class="weui-flex item" style="text-align:right;line-height:0;"> 
<button bindtap="save" class="weui-btn mini-btn" type="primary" size="mini"> 保 存 </button> 
</view> 
</view> 
</view> 
<!-- 自 建 笑话 列表 --> 
<view class="weui-panel" wx:for="{{jokePage.list}}" wx:key="id"> 
<view class="weui-panel__bd"> 


<view class="weui-media-box weui-media-box_text"> 
<text>{ {item.content}}</text> 
<view wx:if="{{item.image}}" class="weui-media-box_desc"> 


<image src="{ {item.image}}" style="width:100%" mode="aspectFit" bindtap="preview" data-url="{ {item.image}}" /> 


</view> 
<view class="weui-media-box__info"> 
<view class="weui-media-box info meta"> 作 者 : {{item.user.nickName}} </view> 
</view> 
</view> 
</view> 
</view> 




















网 


标 上 传 图 像 之 后 ， 会 显示 “已 上 传 ” 的 提示 ， 如 图 10-9 所 示 。 
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使 用 文本 域 组 件 textarea 输 入 文本 。 单 击 “ 医 


[8< WEE 
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绑 定 的 函数 uploadlmage 用 于 上 传 图 片 ， 函 数 save 用 于 保存 生成 的 新 笑话 。 “笑话 ”新 建 区 域 下 方 是 笑话 列表 ， 绑 定 的 是 jokePage 对 象 。 




















10.2.5 “在 小 程序 中 直接 上 传 图 片 


在 文档 树 中 打开 pages/index/new-record.js 文 件 ， 修 改 代码 如 下 : 








let app = getApp() 
Page ({ 
data: { 
newJoke: { 
content:"", 
image:"" 


r 
save () { 
let joke = this.data.newJoke 
console. log (joke) 
if (joke.content || joke.image) { 
app. request ("http://localhost :4000/joke", joke, {method:"POST"}) .then (res => { 
console.log (res) 
this.setData ({ 
newJoke: { } 
t) 
this. retrieve () 
3) 
}else{ 
wx.showModal ({ 
title: ' 提 示 '， 
content: ' 未 输入 文本 或 上 传 图 片 '， 
H 
} 
ty 
onInputJokeText (e) { 
this.data.newJoke.content = e.detail.value 
ty 
uploadImage () { 
app.selectAndUploadImageToQiniu().then(res =>{ 
this.setData ({ 
"newJoke. image": res 
H) 
console.log (res) 
}) 
tr 
retrieve () { 
app. request ("http://localhost :4000/jokes") .then (res => { 
this.setData ({ 
jokePage: res.data 
3) 
}) 
ty 
onLoad (options) { 
this. retrieve () 
ty 
preview(e) { 
var urls = [e.target.dataset.url] 
wx. previewImage ({ 
urls: urls 
H) 









































在 save 函 数 中 ,使 用 了 小 程序 的 wx.showModal 接 口 ， 用 于 提示 用 户 : 














wx. ShowModal ({ 

title: "提示 

content: ' 未 输入 文本 或 上 传 图 片 '， 
}) 

















title 是 提示 窗口 的 标题 ，content 是 提示 内 容 。 效 果 如 图 10-10 所 示 。 








示 
未 输入 文本 或 上 传 图 片 


取消 


在 函数 uploadlmage 中 ， 使 用 了 sim.js 类 库 中 的 新 方法 select-AndUploadlmageToQiniu: 


图 10-10 





app.selectAndUploadImageToQiniu().then(res =>{ 
this.setData ({ 
"newJoke. image": res 


}) 
console.log (res) 








该 方法 会 自动 选择 一 张 图 片 并 上 传 至 七 牛 云 存储 。 


























不 需要 额外 设置 其 他 内 容 ， 因 为 我 们 已 经 在 10.1.1 节 的 config.in 配 置 中 开启 了 云 上 传 支持 。 打 开 sim,jsindexjs 文 件 ， 找 到 uploadToQiniu 函 数 ， 从 这 个 函数 中 可 以 看 出 ， 其 图 片 的 上 传 是 直接 向 七 牛 
云 存 储 的 服务 器 上 传 ， 仅 是 从 自己 的 服务 器 获取 uptoken， 而 uptoken 是 标识 七 牛 云 账 号 的 信息 。 



























































在 用 户 手机 端 直接 向 七 牛 的 服务 器 上 传 ， 避 免 从 自己 的 服务 器 中 转 ， 可 以 有 效 节 省 流量 ， 减 轻 服 务 器 压力 。 在 用 户 增多 以 后 ， 由 于 七 牛 使 用 的 是 云 主 机 ， 用 户 就 近 上 传 ， 还 避免 了 扩展 服务 器 功能 的 麻 























烦 。 





app.selectAndUploadlmageToQiniu 函 数 使 用 了 七 牛 的 域名 https://up.qbox.me， 如 果 提 交 版 本 审核 ， 记 得 把 该 域名 添加 到 服务 器 域名 列表 中 。 


10.3 “下载 源码 


在 本 章 的 学 习 过 程 中 ， 如 果 遇 到 问题 ， 可 以 通过 如 下 方式 来 解决 。 
+ 加 入 小 程序 微 信 群 与 作者 及 其 他 读者 一 同 探讨 。 微 信 扫 描 前 言 中 的 二 维 码 ， 关 注 “ 艺 述 思维 ”， 发 送 “ 小 程序 ” 进 群 。 


“下载 作者 的 源码 ， 对 照 查找 问题 。 在 公众 号 中 发 送 “ 笑 林 百 家 10.2” 获 取 下 载 地 址 。 服 务 端的 源码 在 小 程序 项 目的 server 目 录 中 。 


第 三 篇 “实用 组 件 篇 


“第 11 章 容器 组 件 
“第 12 章 ”基础 内 容 组 件 
“ 第 13 章 ”表单 组 件 


“第 14 章 多 媒体 及 其 他 组 件 


第 11 章 ”容器 组 件 








读者 可 以 在 微 信 公 号 “ 艺 述 思维 ”中 回复 “ 微 信 小 程序 从 0 到 1 练习 ”， 下 载 随 章 示例 程序 。 本 书 第 11 ~ 14 章 的 练习 代码 在 这 个 示例 中 都 能 找到 。 该 示例 项 目 是 基于 微 信 官方 的 小 程序 示例 修改 的 。 
































容器 组 件 用 于 装载 其 他 组 件 ， 目 前 小 程序 的 容器 组 件 有 view、scroll-view、swiper、movable-view、cover-view 等 。 


11.1 view 








view 是 小 程序 UI 设计 中 的 万 能 视图 ， 能 独立 表现 文本 ， 也 能 装载 其 他 组 件 ， 很 多 看 似 复杂 的 UI 效果 都 是 基于 最 普遍 的 view 实 现 的 。 




















view 具 有 以 下 属性 。 


+ hover-class: 指定 按 下 去 的 样式 类 。 当 hover-class="none" 时 ， 表 示 没 有 点 击 态 效果 。 使 用 sim.js 中 的 “view-hover-class”， 有 一 个 80% 的 高 亮 效 果 。 默 认为 “none”。 
- hover-start-time: 按 住 后 多 久 出 现 点 击 态 ， 单 位 为 ms。 


- hover-stay-time: 手指 松 开 后 点 击 态 保留 的 时 间 ， 单 位 为 ms。 














在 style 属 性 中 设置 flex-direction 样 式 为 row， 可 以 实现 视图 块 的 横向 布局 ， 这 也 是 子 组 件 默认 的 布局 ， 代 码 如 下 所 示 : 





<view class="flex-wrp" style="flex-direction: row; "> 
<view hover-class="view-hover-class" hover-start-time="100" hover-stay-time="200" class="flex-item demo-text-1"></view> 


<view hover-class="view-hover-class" clas. flex-item demo-text-2"></view> 
<view hover-class="view-hover-class" class="flex—item demo-text-3"></view> 
</view> 





























上 述 代 码 将 hover-stay-time 属 性 设置 为 200ms， 这 也 是 人 类 易于 感知 的 最 小 时 间 ， 效 果 如 图 11-1 所 示 。 


flex-direction: row 


横向 布局 




















在 style 属 性 中 设置 flex-direction 样 式 为 column， 可 以 实现 子 组 件 的 竖 向 布局 ， 代 码 如 下 所 示 : 





<view class="flex-wrp" style="flex-direction:column;"> 
<view hover-class="view-hover-class" class="flex-item flex-item-V demo-text-1"></view> 
<view hover-class="view-hover-class" class="flex-item flex-item-V demo-text-2"></view> 
<view hover-class="view-hover-class" class="flex-item flex-item-V demo-text-3"></view> 


</view> 




















hover-class 属 性 设置 长 按 样式 为 view-hover-class， 就 会 有 一 个 高 度 效 果 ， 如 图 11-2 所 示 。 





nex-direcuon: Column 


纵向 布局 








图 11-2 


11.2 scroll-view 


scroll-view 是 赋予 子 组 件 滚动 功能 的 容器 ， 在 第 2 章 “ 豆 豆 电影 ”小 程序 的 列表 页 中 已 经 使 用 过 。 使 用 竖 向 滚动 时 ， 需 要 给 <scroll-view/> 一 个 固定 高 度 ， 通 过 WXSS 设 置 height。 
scroll-view 具 有 如 下 属性 。 

' scroll-x: 允许 横向 滚动 。 

scroll-y: 允许 纵向 滚动 。 

“ upper-threshold: 距 顶 部 /左边 多 远 时 (单位 px) ， 触 发 scrolltoupper 事 件 ， 上 默认 为 50px。 

“ lower-threshold: 距 底 部 /右边 多 远 时 (单位 px) ， 触 发 scrolltolower 事 件 ， 上 默认 为 50px。 

 scroll-top: 设置 竖 向 滚动 条 位 置 。 

“ scroll-left: 设置 横向 滚动 条 位 置 。 

“ scroll-into-view: 值 应 为 某 子 元 素 的 id。 若 设置 哪个 方向 可 滚动 ， 则 在 哪个 方向 滚动 到 该 元 素 。 

+ scroll-with-animation: 在 设置 滚动 条 位 置 时 使 用 动画 过 渡 。 

+ enable-back-to-top: iOS 系 统 中 点 击 顶部 状态 栏 、 安 卓 系 统 中 双击 标题 栏 时 ， 滚 动 条 返回 顶部 ， 只 支持 竖 向 。 
+ bindscrolltoupper: 滚动 到 顶部 /左边 ， 会 触发 scrolltoupper 事 件 。 


' bindscrolltolower: 滚动 到 底部 /右边 ， 会 触发 scrolltolowet 事 件 。 





“ bindscroll: RAITAR, event.detail4F {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}. 





对 于 上 述 属 性 ， 可 能 有 读者 会 有 如 下 疑惑 。 

















1.scroll-x 与 scroll-y 能 否 同时 设置 为 true， 实 现 四 面 八方 可 同时 滚动 














实验 代码 如 下 所 示 : 











demo2" class="scroll-view-item demo-text-2"></view> 
<view id="demo3" class="scroll-view-item demo-text-3"></view> 


</scroll-view> 





答案 是 可 以 的 ， 效 果 如 图 11-3 所 示 。 


< 
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关键 是 必须 让 子 组 件 的 宽 、 高 均 大 于 scroll-view 容 器 ， 设 置 第 一 个 子 组 件 width 等 于 1000rpx 是 必须 要 有 的 代码 。 





注意 ， 布 尔 值 属性 如 scroll-y、scroll-x 等 ， 不 能 写 属 性 值 ， 直 接 写 个 属性 就 可 以 了 。 


2. 如 何 手动 设置 竖 向 滚动 条 位 置 








首先 ， 将 scroll-top 或 scroll-left 属 性 绑 定 到 一 个 data 变 量 上 ， 然 后 动态 改变 变量 的 值 。 代 码 如 下 : 





<view class="page-section"> 
<view class="page-section-title center"> 
<text> 手 动 设置 竖 向 滚动 条 位 置 </text> 
</view> 
<view class="page-section-spacing"> 
<scroll-view scroll-y scroll-x scroll-top="{ {dyncData['scrollTop1']}}" scroll-left="{{dyncData['scrollLeft1l']}}" style="height: 300rpx;"> 
<view style="width:1000rpx" class="scroll-view-item demo-text-1"></view> 
<view class="scroll-view-item demo-text-2"></view> 
<view class="scroll-view-item demo-text-3"></view> 
</scroll-view> 
</view> 
<view class="weui-btn-area"> 
<view class="weui-flex"> 
<view class="weui-flex item center"> 
<button data-name="scrollTop1" bindtap="plusDyncData" class="weui-btn mini-btn" size="mini"> 横 向 自动 </button> 
</view> 
<view class="weui-flex_ item center"> 


<button data-name="ScrollLeft1" bindtap="plusDyncData" class="weui-btn mini-btn" size="mini"> 竖 向 自动 </button> 
</view> 
</view> 
</view> 
</view> 





其 中 的 粗 体 部 分 是 主要 代码 。 


接着 通过 两 个 按钮 控制 两 个 变量 自 增 ， 实 现 scroll-top、scroll-left 的 动态 绑 定 。plusDyncData 函 数 的 代码 如 下 所 示 : 





plusDyncData (e) { 
var filedName = e.currentTarget.dataset.name 
var dyncData = this.data.dyncData 
dyncData[filedName] = (dyncData[filedName] || 0)+5 
this.setData ({ 
dyncData:dyncData 
}) 








为 了 避免 重复 声明 变量 和 函数 ， 笔 者 声明 了 一 个 万 能 的 dyncData 对 象 ， 将 变量 名 称 放 在 了 dataset 中 动态 设置 。 这 样 就 可 以 实现 想 要 的 效果 ， 实 现 的 效果 如 图 11-4 所 示 。 


横向 目 动 


3. 如 何 实现 动态 滚动 到 某 子 组 件 


实践 代码 如 下 : 














手动 设置 紧 问 滚动 条 位 置 





紧 回 自动 





<view class="page-section"> 
<view class="page-section-title"> 
<text: 到 视图 </text> 
</view> 
<view class="page-section-spacing"> 








<scroll-view scroll-y enable-back-to-top scroll-with-animation scroll-into-view="{ {dyncData['scrollIntoView1']}}" style="height: 300rpx;"> 
<view class="scroll-view-item demo-text-1"></view> 


<view clas: 
<view clas: 
<view cl 








scroll-view-item demo-text-— 
scroll-view-item demo-text-1"></view> 
scroll-view-item demo-text-1"></view> 


></view> 


<view id="scrolliIntoViewl" class="scroll-view-item demo-text-2"></view> 
<view class="scroll-view-item demo-text-3"></view> 


</scroll-view> 

</view> 

<view class="weui-btn-area"> 
<view class="weui-flex"> 


<view class="weui-flex_ item center"> 


<button data-name="scrollIntoViewl" data-value="scrollIntoViewl" bindtap="setDyncData" class="weui-btn mini-btn" size 


="mini"> 一 下 深 动 到 倒数 第 二 个 子 组 件 </button> 
























































</view> 
</view> 
</view> 
</view> 
其 中 的 粗 体 部 分 为 主要 代码 。scroll-with-animation 属 性 用 于 启用 滚动 动画 。enable-back-to-top 属 性 则 用 于 启用 双击 标题 栏 返 回 顶部 。 为 便于 复制 复 用 ， 笔 者 声明 了 一 个 万 能 的 setDyncData 函 数 ， 


通过 组 件 的 dataset 来 设置 name、value， 代 码 如 下 : 





setDyncData (e) { 


var filedName = e.currentTarget.dataset.name 
var filedValue = e.currentTarget.dataset.value 


var dyncData = this.data.dyncData 
dyncData[filedName] = filedValue 
this.setData ({ 

dyncData:dyncData 
H) 








实现 的 效果 如 


网 








11-5 所 示 。 
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一 下 滚动 到 便 数 第 二 个 子 组 件 
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图 11-5 
11-5 中 的 “一 下 滚动 到 倒数 第 二 个 子 组 件 ” 按 钮 ，scroll-view 视 图 将 滚动 到 B 视 图 ， 带 有 动画 。 虽 然 这 个 滚动 容器 并 非 全 屏 ， 但 仍然 可 有 效 开 启 enable-backrto-top 功 能 ， 不 过 ， 在 微 信 开发 者 
工具 中 不 能 测试 该 功能 ， 在 微 信 上 预览 时 可 以 测试 该 功能 。 
4 如 何 监听 页 面 滚动 到 底部 、 项 部 


代码 如 下 : 


<view class="page-section"> 
<view class="page-section-title center"> 
<text>Vertical Scroll\n 纵 向 滚动 ， 带 底 、 顶 部 滚动 测试 </text> 
</view> 


<view class="page-section-spacing"> 








<scroll-view scroll-y style="height: 300rpx;" bindscrolltoupper="scrollToSide" bindscrolltolower="scrollToSide" bindscroll="scroll"> 
"scroll-view-item demo-text-1"></view> 
<view id="demo2" class="scroll-view-item demo-text-2"></view> 
<view id="demo3" class="scroll-view-item demo-text-3"></view> 
</scroll-view> 
</view> 
</view> 





其 中 的 粗 体 部 分 为 主要 代码 。 无 论 是 滚动 到 底部 ， 还 是 项 部， 都 是 将 








件 绑 定 到 同一 个 函数 : 





scrollToSide(e) { 
console.log (e) 


if (e.detail.direction == "top") { 
wx.showToast 
title: '} 





({ 
动 到 达 顶 部 '， 


} else if (e.detail.direction == "bottom") { 
wx.showToast 


({ 
title: “滚动 到 达 底部 
H 








通过 event.detail.direction 可 检测 方向 ， 有 效 值 包括 top、bottom、left、right 等 ， 
运行 效果 如 图 11-6 所 示 。 




















体 值 依据 滚动 方向 而 不 同 。 这 一 点 在 官方 文档 中 并 无 说 明 ， 在 使 




















时 须 考虑 可 能 的 变化 。 


Vertical Scroll 
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单 次 滚动 到 边界 的 事件 不 会 频繁 触发 ， 仅 会 触发 一 次 。 























在 scroll 函 数 中 ， 仅 会 打开 事件 对 象 ， 代 码 如 下 : 





scroll: function(e) { 
console. log (e) 


} 














event.detail 包 含 了 事件 的 全 部 信息 ， 如 图 11-7 所 示 。 














VObject {type: "scroll", timeStamp: 50001, target: Object, currentTarget: Object, detail: Object} 
> currentTarget: Object 
v detail: Object 

deltax: 0 
deltaY: 50 
scrollHeight: 384 
scrollLeft: 0 
scrollTop: 178 
scrollWidth: 252 
>__proto_: Object 
> target: Object 
timeStamp: 50001 
type: “scroll” 
> proto: Object 
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其 中 deltaY 代 表 此 次 竖 向 滚动 的 单 次 步 距 ，deltaX 同 理 。 


























需要 说 明 的 是 ，scroll-view 视 图 的 滚动 步 距 目 前 尚 不 能 自 定 义 ， 在 scroll-view 组 件 上 设置 deltaY 属 性 无 效 ， 但 也 不 会 报错 。 小 程序 组 件 具 有 js 对 象 的 优点 ， 可 以 随意 动态 扩展 。 代 码 如 下 : 




















<scroll-view deltaY="10" scroll-y style="height: 300rpx;" bindscrolltoupper="scrollToSide" bindscrolltolower="scrollToSide" bindscroll="scroll"> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
</scroll-view> 


11.3 swiper 











swiper 是 滑动 视图 容器 ， 第 2 章 中 曾 使 用 它 实现 过 splash 功 能 。 




















[ 














swiper 组 件 主要 具有 以 下 属性 。 

“ indicator-dots: 是 否 显示 面板 指示 点 。 

* indicator-color: 指示 点 颜色 ， 默 认为 0.3， 即 透明 的 白色 。 

- indicator-active-color: 当前 选中 的 指示 点 颜色 ， 默 认为 白色 。 
autoplay: 是 否 自动 切换 。 

current: 当前 所 在 的 页 面 ， 自 0 计数 。 

‘interval: 自动 切换 时 间 间 隔 ， 单 位 ms。 

- duration: 滑动 动画 时 长 。 

‘circular: 是 否 采 用 衔接 滑动 。 

‘vertical: 滑动 方向 是 否 为 纵向 ， 黑 认为 false。 


+ bindchange: current 改 变 时 会 触发 change 事 件 ， 其 中 event.detail={current: current, source: source}. 





swiper 组 件 虽 然 属性 较 多 ， 但 是 并 不 复杂 。 人 小 程序 组 件 的 属性 ， 存 在 很 多 相通 之 处 ， 一 通则 百 通 。 











对 应 上 述 属性 的 实践 代码 如 下 : 


<view class="page-section page-section-spacing swiper"> 
<swiper bindchange="traceEvent" circular="{{circular}}" indicator-dots="{{indicatorDots}}" auto play="{{autoplay}}" interval="{{interval}}" duration="{ {duration} }"> 
<block wx:for="{ {background} }" wx:key="*this"> 
<swiper-item> 
<view class="swiper-item {{item}}"></view> 
</swiper-item> 
</block> 
</swiper> 
</view> 
<view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;"> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell switch"> 
<view class="weui-cell bd"> 和 指示 点 </view> 
<view class="weui-cell ft"> 
<switch data-name="indicatorDots" checked="{{indicatorDots}}" bindchange="onSwitchChange" /> 
</view> 
</view> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell _bd"> 自 动 播放 </view> 
<view class="weui-cell ft"> 
<switch data-name="autoplay" checked="{{autoplay}}" bindchange= "onSwitchChange" /> 
</view> 
</view> 
<view class="weui-cell weui-cell switc 
<view class="weui-cell bd"> 采 用 衔 提 
<view class="weui-cell ft"> 
<switch data-name="circular" checked="{{circular}}" bindchange= "onSwitchChange" /> 
</view> 
</view> 
</view> 
</view> 
<view class="page-section page-section-spacing"> 
<view class="page-section-title"> 
<text> 幻 灯 片 切换 时 长 (ms) </text> 
<text class="info">{{duration}}</text> 
</view> 
<slider data-name="duration" bindchange="onSliderChange" value="{{duration}}" min="500" max="2000" /> 
<view class="page-section-title"> 
<text> 自 动 播放 间隔 时 长 (ms) </text> 
<text class="info">{{interval}}</text> 
</view> 
<slider data-name="interval" bindchange="onSliderChange" value="{{interval}}" min="2000" max="10000" /> 
</view> 








动 </view> 








其 中 的 粗 体 部 分 是 关键 代码 。 这 个 demo 包 括 了 swiper 组 件 的 所 有 属性 。 


swiper-item 是 swiper 的 子 组 件 ， 宽 高 自动 设置 为 100%。swiper-item 是 一 种 特殊 的 容器 组 件 。 有 几 个 swiper-item， 就 代表 能 翻 几 页 。swiper-item 内 部 可 放置 任何 可 视 内 容 。 

















为 了 简化 编写 ， 三 个 布尔 值 属性 autoplay、circular、vertical 可 使 用 可 统一 的 事件 函数 onSwitchChange， 代 码 如 下 : 











onSwitchChange (e) { 
var fieldName = e.currentTarget.dataset.name 
var data = {} 
data[fieldName] = ! (data[fieldName] || false) 
this.setData (data) 











依据 每 个 组 件 都 有 的 自 定义 对 象 dataset， 向 逻辑 层 传 递 需要 改变 的 布尔 值 名 称 ， 省 去 了 为 每 个 Switch 组件 书写 一 个 函数 的 麻烦 。 给 两 个 slider 组 件 使 用 的 onsliderChange 函 数 与 之 类 似 ， 代 码 如 下 : 











onSliderChange (e) { 
var fieldName = e.currentTarget.dataset.name 
var data = {} 
data[fieldName] = e.detail.value 
this.setData (data) 





























onSwitchChange 函 数 的 实现 方法 与 onSliderChange 类 似 ， 都 是 先 通过 dataset 区 别 变量 名 ， 然 后 动态 创建 一 个 data 对 象 ， 并 调用 setData 强 制 泻 染 的 。 直 接 使 用 setData ({fieldName: xx}) 是 不 可 
以 的 ，JS 会 将 fieldName 视 为 键 名 ， 而 不 是 它 的 值 ， 此 处 也 不 可 以 使 用 模板 字符 串 ， 代 码 如 下 : 








onSliderChange (e) { 
var fieldName = e.currentTarget.dataset.name 
this.setData({~${fieldName}*:e.detail.value}) 








完成 后 的 效果 如 图 11-8 所 示 。 











swiper eee 





指示 所 





目 动 播放 
采用 衔接 滑动 


C 


幻灯 片 切换 时 长 (ms) 674 


和 目 动 播 帮 间隔 时 长 (ms) 2000 
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关于 衔接 滑动 ， 是 指 滑 到 最 后 一 片 时 ， 若 继续 滑动 ， 则 是 第 一 张 。 如 果 不 设置 circular 为 true， 那 么 滑动 到 最 后 一 片 时 ， 则 只 能 回头 向 前 滑动 。 自 动 播放 也 会 先 滑 到 开头 再 播放 。 





















































在 change 的 事件 函数 中 ，event.detail.source 代 表 滑 动 动画 变更 的 原因 ， 其 具有 两 个 有 效 值 ， 具 体 如 下 。 




















“ autoplay: 是 自动 播放 导致 swiper 变 化 。 
- touch: 是 用 户 滑 动 引 起 swiper 变 化 。 


本 节 不 仅 练习 了 swiper 组 件 ， 还 练习 了 switch 和 slider 组 件 。 


11.4 movable-view 























movable-view 是 一 个 可 移动 的 视图 容器 ， 与 movable-area 搭 配 使 用 ， 在 movable-area 内 可 以 拖 岛 滑动。 对 于 movable-area， 必 须 设置 width 和 height 属 性 ， 若 不 设置 则 默认 为 10pxx10px， 在 这 么 
小 的 区 域内 任何 组 件 几乎 都 无 法 拖 动 。 














movable-view 主 要 具有 以 下 属性 。 

+ direction: movable-view 4945 HF r, Ay te{iAall, vertical, horizontal, none. 

- inertia: movable-view 是 否 带 有 惯性 ， 默 认为 false。 

- out-of-bounds: 超过 可 移动 区 域 之 后 ，movable-view 是 否 还 可 以 移动 ， 默 认为 false。 

“ x: 定义 x 轴 方向 的 偏 移 ， 如 果 x 的 值 不 在 可 移动 的 范围 之 内 ， 那 么 其 会 自动 移动 到 可 移动 范围 。 改 变 x 的 值 会 触发 动画 。 

ty! 定义 y 轴 方向 的 偏 移 ， 如 果 y 的 值 不 在 可 移动 的 范围 之 内 ， 那 么 其 会 自动 移动 到 可 移动 范围 。 政 变 y 的 值 会 触发 动画 。 

+ damping: 阻尼 系数 ， 用 于 控制 x 或 y 改 变 时 的 动画 和 过 界 回 弹 的 动画 ， 值 越 大 移动 越 快 。 

“ friction: 摩擦 系数 ， 用 于 控制 惯性 滑动 的 动画 ， 值 越 大 摩擦 力 越 大 ， 滑 动 也 会 越 快 停止 ; 其 值 必须 大 于 0， 和 否则 会 被 设置 成 默认 值 。 


主要 实践 代码 如 下 : 





<view class="page-section"> 
<view class="page-section-spacing center"> 
<movable-area style="height: 200px;width: 200px;background: red;"> 
<movable-view damping="{ {damping}}" friction="{{friction}}" inertia="{{inertia}}" out-of-bounds="{{outOfBounds}}" x="{{pos.x}}" y="{{pos.y}}" style="height: 50px; w 
</movable-view> 
</movable-area> 
</view> 
<view class="weui-btn-area"> 
<view class="weui-flex"> 
<view class="weui-flex_- 
<button data-name="pos" data-value="{{target}}" bindtap="setNameValue" class="weui-btn mini-btn" size="mini" >it A (30px, 30px) </button> 
</view> 
</view> 
</view> 
</view> 
<view class="page-section" style="margin-top: 40rpx"> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell _bd"> 使 用 惯性 </view> 
<view class="weui-cell ft"> 
<switch data-name="inertia" checked="{{inertia}}" bindchange= "onSwitchChange" /> 
</view> 
</view> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell _bd"> 允 许 越界 </view> 
<view class="weui-cell ft"> 
<switch data-name="outOfBounds" checked="{ {outOfBounds}}" bindchange= "onSwitchChange" /> 
</view> 
</view> 
</view> 
</view> 
<view class="page-section"> 
<view class="page-section-title"> 





<text> 阻 尼 系 数 </text> 
<text class="info">{ {damping} }</text> 
</view> 


<slider data-name="damping" bindchange="onSliderChange" value="{{damping}}" show-value min="10" max="100" /> 
<view class="page-section-title"> 


<text> 摩 控 系 数 </text> 
<text class="info">{{friction}}</text> 
</view> 


<slider data-name="friction" bindchange="onSliderChange" value="{{friction}}" show-value min="1" max="10" /> 
<view class="page-section-title"> 

<text> 滑 动 方向 </text> 

<text class="info">{ {direction} }</text> 
</view> 
<radio-group data-name="direction" class="radio-group" bindchange= "onRadioChange"> 

<label class="radio" wx:for="{{['all', 'vertical', 'horizontal', 'none']}}" wx:key="*this"> 

<radio value="{{item}}" checked="{{item == direction}}"/>{{item}} 

</label> 

</radio-group> 





</view> 











那么 ， 如 何在 列表 演 染 中 直接 绑 定 字面 数组 呢 ? 






























































如 果 把 一 个 静态 数组 写 进 页 面 初始 数据 对 象 data 中 ， 只 使 用 一 次 则 有 些 浪费 。 而 如 果 多 次 输入 重复 的 代码 又 会 显得 很 枯燥 ， 这 时 候 可 以 使 用 字面 数组 直接 绑 定 于 列表 演 染 中 ， 示 例 代 码 如 下 : 




















<radio-group data-name="direction" class="radio-group" bindchange="onRadioChange"> 
<label class="radio" wx:for="{{['all', 'vertical', 'horizontal', 'none']}}" wx:key="*this"> 
<radio value="{{item}}" checked="{ {item == direction}}"/>{{item}} 
</label> 
</radio-group> 











其 中 的 粗 体 部 分 就 是 字面 数组 ， 如 果 不 以 中 括号 “[” 括 起 来 ， 那 么 循环 的 将 是 字符 串 ， 而 非 数组 。 

















radio-group 是 单项 选择 器 ， 内 部 由 多 个 <radio/> 组 成 。 


























上 面 的 视 | 














层 代码 对 应 的 逻辑 层 代码 如 下 : 








[ 





let app = getApp() 


Page (Object.assign(app.page, { 
data: { 
outOfBounds: true, 
inertia:true, 
friction:2, 
damping:20, 
direction: "all", 
target: {x:30,y:30} 
} 
})) 


























以 上 代码 非常 简洁 ， 在 视图 层 使 用 的 onSwitchChange、onSliderChange、onRadioChange 函 数 并 没有 定义 在 这 里 。 那 么 ， 它 们 被 定义 在 哪里 了 ? 











打开 simjs/lib/pagejjs 文 件 ， 即 可 看 到 这 些 函 数 的 定义 。 由 于 它们 具有 稳定 、 重 复 的 逻辑 结构 ， 所 以 将 它们 抽象 到 sim.js 类 库 中 ， 以 便 后 续 和 



































Man 


用 。 



































函数 Object.assign 会 将 当前 文件 的 页 面 对 象 ( 见 上 面 代码 中 的 粗 体 部 分 ) 复制 到 app.page 对 象 中 ， 以 覆盖 式 并 集 的 方式 组 成 新 的 页 面 对 象 ， 页 面 对 象 中 定义 的 函数 可 以 覆盖 掉 app.page 中 预定 义 的 函 

















关于 属性 direction， 截 至 作者 发 稿 时 尚 不 支持 动态 绑 定 。 切 换 radio 选 项 ， 对 移动 方向 无 影响 。 








完成 后 的 效果 如 图 11-9 所 示 。 
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单 击 移 至 (30px, 30px) 
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11.5 cover-view 


cover-view 是 一 个 特殊 的 视频 容器 ， 履 盖 在 原生 组 件 之 上 ， 可 覆盖 的 原生 组 件 包括 map、video、canvas， 支 持 嵌 套 ， 支 持 内 肉 cover-image 组 件 。cover-image 组 件 与 image 类 似 ， 但 其 仅 有 一 个 src 
属性 。 























使 用 cover-view、cover-image， 可 以 在 原生 的 video 组 件 上 实现 一 个 自 定义 的 播放 控件 。 它 们 已 经 支持 实现 的 功能 包括 播放 /和 暂停、 全屏/ 退出 全 屏 、 显 示 播 放 进 度 / 拖 动 播放 、 设 置 播放 倍速 等 。 























下 面 将 使 用 cover-view 组 件 实现 播放 、 和 暂停 的 功能 控件 。 



































如 图 11-10 所 示 ， 单 击 “ 播 放 ” 按 钮 ， 视 频 开始 播放 。 图 11-11 所 示 的 是 单 击 “ 暂 停 ”按钮 ， 视 频 暂 停 的 画 


B 
网 
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图 11-11 

















[ 


其 中 ，“ 播 放 ” 和 “暂停 ”按钮 是 嵌 套 于 cover-view 容 器 内 的 cover-image 组 件 。 在 如 下 的 代码 中 ， 第 一 个 cover-image 是 “暂停 ”按钮 ， 第 二 个 是 “播放 ”按钮 。 这 两 个 图 像 按 钮 使 用 的 
是 相对 地 址 ， 与 当前 页 面 位 于 同一 目录 下 。 


片 地 址 均 





























<cover-view wx:if="{{playing}}" class="pause" bindtap="pause"> 
<cover-image class="img" src="pause-button.png" 
</cover-view> 
<cover-view wx:else class="play" bindtap="play"> 
<cover-image class="img" src="play-button.png" /> 
</cover-view> 














单 击 “ 暂 停 ” 按 钮 将 会 触发 绑 定 在 其 父 容器 cover-view 上 的 tap 事 件 函数 “pause”。 虽 然 在 微 信 官方 文档 中 ，cover-image 仅 声明 了 一 个 src 属 性 。 但 是 如 果 将 代码 bindtap= "pause" 移 动 到 子 组 件 
cover-image 之 上 ， 那 么 其 一 样 可 以 工作 。 














可 能 有 人 会 问 ， 函 数 pause 是 如 何 工作 的 ? 





















































如 下 述 代码 所 示 ， 在 逻辑 层 代码 中 ， 首 先 在 页 面 周期 函数 onReady 中 ， 使 用 wx.create-VideoContext 接 口 创建 一 个 VideoContent 对 象 。 该 接口 仅 接收 一 个 id 参数 ， 即 视图 层 视频 组 件 video 的 id : 


onReady() { 
this.videoCtx = wx.createVideoContext ('myVideo') 


} 


VideoContent 对 象 是 一 个 控制 视频 源 播放 、 展 示 等 行为 的 对 象 。 它 有 多 个 方法 ， 参 见 本 书 14.4 节 的 video 组 件 。 


























然后 ， 在 pause、play 方 法 中 ， 就 可 以 通过 this.videoCtx 控 制 视 图 层 的 视频 组 件 了 。 如 下 代码 即 为 视图 层 绑 定 的 pause 函 数 ， 它 直接 调 




















了 videoCtx 对 象 的 pause 方 法 : 




















pause() { 
this.videoCtx.pause () 


} 





play 方 法 的 实现 与 pause 类 似 。 两 个 按钮 隐藏 /显示 的 切换 是 通过 页 面 变 量 playing 来 控制 的 。 在 如 下 代码 中 ， 会 通过 对 play、pause、ended 事 件 的 绑 定 ， 监 听 其 播放 状态 : 














<video id="myVideo" autoplay="{{false}}" bindplay="onPlay" bindpause="onPause" bindended="onPause" bindtimeupdate="onTimeUpdate" src="http: //www.hzcourse.com/resource/readBook? 
controls="{{false}}" event-model="bubble" style="width:100%"> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 

</video> 








onPause 与 onPlay 方 法 是 通过 页 面 方法 setData 切 换 页 面 变量 playing 的 。 示 例 代 码 如 下 : 

















onPause() { 
this.setData ({ 
playing: false 
2) 
tr 
onPlay() { 
this.setData ({ 
playing: true 
H) 





121 icon 


1.12 个 icon 图 标 








网 


在 微 信 官 方 文档 中 ， 登 记 在 册 的 icon 








标 有 9 个 : 








success, success no circle, info, warn, waiting, cancel, download, search, clear 











除去 这 9 个 之 外 ， 还 有 3 个 图 标 可 以 使 用 ， 但 并 未 公布 在 官网 文档 中 。 观 察 一 下 上 面 的 图 标 类 型 ， 不 难 发 现 ，“_no_circle” 加 在 “success” 后 




















面 构成 了 新 类 型 “success_no _circle”。 




















“no_circle” 就 有 “_circle”， 将 其 加 在 “success” 后 面 就 是 “success_circle”。 “success_circle” 类 型 虽然 暂 未 见 公开 ， 但 可 以 使 用 。 下 面 将 通过 代码 实践 来 证 实 这 个 猜测 。 


























下 面 将 8 个 基本 图 标 类 型 success、info、warn、waiting、cancel、download、search、clear, 分 别 与 “no _circle” 及“_circle” 组 合 ， 组 成 了 24 个 类 型 ， 代 码 如 下 : 











onLoad () { 
const ORI_TYPES = ["success", "info", "warn", "waiting", "cancel", "download", "search", "clear"] 
let arr = [ 
for (var k in ORI_TYPES) { 
let iconType = ORI_TYPES[k] 
arr.push(iconType, iconType + "_no_circle", iconType +"_circle") 





console.log(arr) 
this.setData ({ 

iconTypes2: arr 
}) 











将 这 24 个 类 型 使 用 wx: for 演 染 出 来 ， 代 码 如 下 : 

















<view class="weui-cells weui-cells_after-title"> 
<view wx:for="{{iconTypes2}}" Class="weui-cell"> 
<view class="weui-cell_hd" style="width: 60rpx"> 
<icon type="{{item}}" size="20" /> 
</view> 
<view class="weui-cell bd">{{item}}</view> 
</view> a 
</view> 

















图 12-1 是 演 染 效果 的 截图 ， 其 中 共有 12 个 有 效 的 图 标 。 比 官方 多 出 来 的 三 个 图 标 分 别 是 success_circle、info_circle 和 waiting_circle。 




















2. 如 何 使 用 icon 图 标 



































icon 图 标的 使 用 非常 简单 ， 它 只 有 三 个 属性 ， 具 体 如 下 。 











- type: icon 的 类 型 ， 有 效 值 如 图 12-1 所 示 。 


组 合 图 标 测试 ( 共 12 个 有 效 图 标 ) 


©) success 
x” success_no_circle 


©) success_circle 


© info 


info_no_circle 

G) info_circle 

© warn 
warn_no_circle 
warn_circle 

©) waiting 
waiting_no_circle 

(© waiting_circle 

(x) cancel 


cancel_no_circle 


cancel circle 
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© download 
download_no_circle 
download_circle 

LU search 
search_no_circle 
search_circle 

íì clear 
clear_no_circle 


clear_circle 














- size: icon 的 大 小 ， 单 位 为 pg， 默认 为 23。 


- color: icon 的 颜色 ， 同 css 的 color， 默 认为 图 标 自 身 的 设计 色 ， 与 图 标 类 型 有 关 。 








如 下 代码 是 icon 图 标的 使 用 示例 : 




















<icon type="success" size="23" color="yellow" /> 





























其 中 ，color 属 性 接受 4 种 形式 的 值 ， 具 体 如 下 。 





:RGB 颜色 : 如 “rgb (255, 0, 0) ” 
“RGBA 颜 色 : 如 “rgba (255, 0, 0, 0.3) ”。 
“16 进 制 颜 色 : 如 “#FF0000”。 


“ 预定 义 的 颜色 : 如 “red”。 


























预定 义 的 颜色 有 100 多 种 ， 仅 记 住 常用 的 一 些 就 可 以 了 ， 如 red、orange、yellow、green、blue、purple， 其 他 颜色 适合 先 在 设计 软件 中 调 好 色 值 ， 再 复制 过 来 使 用 。 








12.2 text 

















本 节 将 主要 介绍 基础 内 容 组 件 text 的 使 用 ，text 组 件 用 于 展示 简易 文本 ， 其 具有 以 下 属性 。 























+ selectable: 长 按 下 文本 是 否 可 选 ， 默 认为 false。 
“ space: 连续 空格 显示 策略 ， 默 认 不 启用 ， 有 效 性 有 ensp、emsp、nbsp。 


- decode: 是 否 解码 ， 可 以 解析 的 有 “&nbs i&lt&gb&amp;&capos; &ensp; &emsp; 




















四 


12-2 所 示 的 页 面 用 于 测试 text 组 件 的 三 个 属性 。“ 添 加 ”与 “删除 ”按钮 分 别 用 于 显示 新 增 一 行文 本 与 减少 一 行文 本 。 


























text eco 


2011 年 1 月 ， 微 信 10 发 布 

10 月 ， 微 信 3.0 Sitti IEDR 

4 月 份 ， 和 给 信 <4.0> 朋 友 轿 发 布 
2017 年 1 月 ， 小 程序 发 布 








MAR EB A 


是 否 解码 


ensp © emsp 


在 如 下 代码 中 ，add 是 添加 文本 行 的 方法 ，remove 是 删除 文本 行 的 方法 。 


nbsp 
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var texts = [ 
"2011 年 1 月 ， 微 信 1.0 发 布 '， 
"10 月 ， 微 信 3.0 新 增 摇 一 摇 功 能 '， 
"4 月 份 ， 微 信 <4 .0> 朋 友 圈 发 布 '， 
'2017 年 1 月 ， 小 程序 
"特殊 字符 : &1'1?13? 结 束 '， 








iF 
let app = getApp () 


Page (Object.assign(app.page, { 


data: { 
text: '', 
canAdd: true, 
canRemove: false 
hy 
extraLine: [], 
add(e) { 


this.extraLine.push (texts [this.extraLine. length] ) 
this.setData ({ 
text: this.extraLine.join('\n'), 
canAdd: this.extraLine.length < texts.length, 
canRemove: this.extraLine.length > 0 
DD 
hr 
remove(e) { 
if (this.extraLine.length > 0) { 
this.extraLine.pop () 
this.setData ({ 
text: this.extraLine.join('\n'), 
canAdd: this.extraLine.length < texts.length, 
canRemove: this.extraLine.length > 0, 


H 


} 
1)) 











在 如 下 代码 中 ， 粗 体 部 分 通过 bindtap 绑 定 了 add、remove 方 法 。 但 使 有 
类 库 : https://github.com/rixingyike/sim.js. 








bindchange 绑 定 的 onSwitchChange 方 法 并 不 存在 于 这 段 代码 之 中 ， 


它 是 通过 Object.assign 方 法 注入 该 页 面 的 ， 源 码 见 开源 





<view class="weui-btn-area"> 
<button disable 





{{!canAdd}}" bindtap="add" class="weui-btn" 


添加 </button> 





type="primary" 


<button disabled="{ {!canRemove}}" bindtap="remove" class="weui-btn" type="primary" >i R</button> 


</view> 
<view class="weui-cells"> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell bd"> 文 本 是 否 可 选 </view> 
<view class="weui-cell ft"> 
<switch data-name="selectable" checked="{ {selectable} 
</view> 
</view> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell bd"> 是 否 解 码 </view> 
<view class="weui-cell ft"> 


}" bindchange= "onSwitchChange" /> 


<switch data-name="decode" checked="{{decode}}" bindchange="onSwitchChange" /> 


</view> 
</view> 
</view> 
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progress 





1.progress 组 件 的 属性 


微 





























信 小 程序 组 件 的 核心 设计 准则 就 是 方便 开发 。 基 础 内 容 组 件 progress 用 于 显示 


- percent: 百分比 0 一 100。 


' show-info: 在 进度 条 右 侧 显示 百分比 。 


+ stroke-width: 进度 条 线 的 宽度 ， 默 认为 6px。 


' activeColor: 已 选择 的 进度 条 的 颜色 。 


+ backgroundColor: 未 选择 的 进度 条 的 颜色 。 


“active: 是 否 显示 进度 条 从 左 往 右 的 动画 。 


如 果 设 置 active 为 true， 则 在 percent 发 生 改变 时 ， 进 度 条 会 有 一 个 从 左 向 右 的 动画 
图 12-6 所 示 。stroke-width 表 示 进 度 条 的 宽度 ， 一 般 为 2px。color 属 性 可 以 忽略 ， 可 使 


本 ,如 


务 进度 ， 如 下 所 示 ， 官 方 提供 的 
































显示 百分比 
进度 条 动画 
进度 条 宽度 


进度 条 前 景色 


#10AEFF 


#ffOOff 

















progress 








属性 已 经 可 以 满足 绝 大 多 数 的 业务 逻辑 需求 。 





。 即 使 在 第 一 次 打开 页 面 时 ， 也 会 看 到 这 个 动画 。show-info 属 性 如 果 为 true， 则 会 在 进度 条 右 侧 显示 一 个 百分比 文 
activeColor 代 蔡 。activeColor 代 表 前 景色 ，backgroundColor 代 表 背 景色 。 





30% 








#aaAEFF 


#aaa 
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2. 如 何 改变 百分比 文本 的 颜色 


那么 ， 有 没有 办 法 改变 右边 percent 百 分 比 的 数字 颜色 呢 ? 





答案 是 有 ， 只 需要 在 style 属 性 上 添加 color 样 式 即 可 ， 代 码 如 下 : 





<progress style="color:red" percent="30" backgroundColor="{ {backgroundColor}}" activeColor="{ {activeColor}}" show-info="{{showInfo}}" active="{{active}}" stroke-width="{ {stroke 








在 图 12-6 所 示 的 界面 中 ， 笔 者 用 一 个 页 面 测试 了 几乎 所 有 的 属性 。 





图 12-6 所 示 界 面 的 视图 层 源码 如 下 : 











<view class="spacing"> 
<view class="weui-flex"> 
<view class="weui-flex item"> 
<progress style="color:red" percent="30" backgroundColor="{ {backgroundColor}}" activeColor="{ {activeColor}}" show-info="{ {showInfo}}" active="{{active}}" stroke-wic 
</view> 
</view> 
</view> 
<view class="weui-cells"> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell bqd"> 显 示 百分比 </view> 
<view class="weui-cell ft"> 
<switch data-name="showInfo" checked="{{showInfo}}" bindchange= "onSwitchChange" /> 
</view> 
</view> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell _bd"> 进 度 条 动画 </view> 
<view class="weui-cell ft"> 
<switch data-name="active" checked="{{active}}" bindchange= "onSwitchChange" /> 
</view> 
</view> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell_hd"> 
<view class="weui-Iabel"> 进 度 条 宽度 </view> 
</view> 
<view class="weui-cell_bd"> 
<slider data-name="strokeWidth" bindchange="onSliderChange" value= "{{strokeWidth}}" show-value min="2" max="20" /> 
</view> 
</view> 
</view> 
<view class="weui-cel1s_title"> 进 度 条 前 景色 </view> 
<view class="weui-cells weui-cells_after-title"> 
<radio-group data-name="activeColor" bindchange="onRadioChange"> 
<label class="weui-cell weui-check_ label" wx:for="{{['#lOAEFF', '#£f00ff', '#aaAEFF']}}" wx:key="value"> 
<radio clas weui-check" value="{ {item}}" checked="{ {item == activeColor}}"/> 
<view class="weui-cell_ bd" style="color: { {item}}">{{item}}</view> 











<view class="weui-cell ft weui-cell_ ft in-radio" wx:if="{ {item == activeColor}}"> 
<icon class="weui-icon-radio" type="success_no_ circle" size= "16"></icon> 
</view> 
</label> 
</radio-group> 


</view> 
<view class="weui-cells title"> 背 景色 </view> 
<view class="weui-cells weui-cells_after-title"> 
<radio-group data-name="backgroundColor" bindchange="onRadioChange"> 
<label class="weui-cell weui-check label" wx:for="{{['#ccc', '#teee', '#aaa']}}" wx:key="value"> 





<radio class="weui-check" value="{{item}}" checked="{ {item == backgroundColor}}"/> 
<view class="weui-cell bd" style="color: { {item} }">{ {item} }</view> 
<view class="weui-cell_ ft weui-cell ft in-radio" wx:if="{{item == backgroundColor}}"> 
<icon class="weui-icon-radio" type="success_no_circle" size="16"></icon> 
</view> i 
</label> 
</radio-group> 


</view> 


























12-6 所 示 界 面 的 逻辑 层 源码 如 下 ， 在 周期 函数 onLoad 中 调用 setData， 设 置 strokeWidth、backgroundColor 等 页 面 数据 变量 的 初始 值 ， 是 为 了 在 默认 情况 下 视图 能 显示 正常 的 值 ， 而 不 是 和 零 值 : 





网 

















let app = getApp() 
Page (Object .assign (app.page, { 
data: {}, 
onLoad() { 
this.setData ({ 
strokeWidth: 6, 
backgroundColor:"#ccc", 
activeColor:"#10AEFEF", 
strokeWidth:2 


第 13 章 ”表单 组 件 




















小 程序 的 表单 组 件 通 常 是 指 包括 input、radio、checkbox、label 在 内 的 11 个 表单 组 件 和 辅助 表单 组 件 ， 它 们 足以 满足 各 种 常见 的 基础 表单 的 业务 需求 。 


13.1 button 














如 图 13-1 所 示 ， 笔 者 使 用 若干 表单 组 件 测试 了 button 的 属性 。 




















button eee 





so sain O O a 


aeTault 


1.4open-type="getUserInfo" hy 
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当 open-type= "getUserlnfo" 时 ， 此 时 的 按钮 是 一 个 授权 小 程序 可 以 拉 取 用 户 信息 的 按钮 ， 示 例 代 码 如 下 。 当 单 击 该 授权 按钮 时 ， 如 果 用 户 未 曾 授权 过 ， 那 么 微 信 会 弹 窗 请 求 用 户 授权 ; 如 果 用 户 已 经 
授权 ， 则 会 直接 在 onGetUserinfo 方 法 中 返回 userlnfo， 如 图 13-2 所 示 。 
<button bindgetuserinfo="onGetUserinfo" open-type= "getUserInfo" type="primary"> 用 户 授权 </button> 
司 13-2 是 用 console.log 打 印 event.detail 的 截图 。 
button. js [sm 


Object {errMsg: “getUserInfo:ok", rawData: "{"nickName":" FZ" ,"gender":1," language" :"zh_CN","ci.. 


> 


o0Ms joXdngoN4arZPLVInFrsf8Vk82IibeUBVUXcLwihyQ/6"}", userInfo: Object, signature: 


“debf2ce608682169911d13fc817a526b4 f48eca4", encryptedData: "r49BvrSalLz4rMJP2iYdfOPb3qD3ysx+z3PV3mbm6BxUHQVGB: 
tlbnAeIdrj2zGb3CnT+RWAVI FIRYMCcYeNg fXwakGInrYtw=="...} 


2.4open-type="contact" ht 


当 open-type= "contact" 时 ， 单 击 后 直接 进入 客服 对 话 窗口 。 注 意 ， 该 功能 仅 能 在 手机 上 进行 测试 ， 在 微 信 Web 开 发 者 工 











13.2 checkbox 




















当 向 用 户 就 某 一 个 问题 收集 多 个 答案 时 ， 这 时 可 使 用 多 项 选择 器 。 
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中 测试 时 不 能 正常 工作 。 








checkbox 是 多 选项 目 ， 单 独 使 用 意义 不 大 ， 一 般 与 多 项 选择 器 checkbox-group 搭 配 使 用 。 如 下 代码 所 示 的 是 一 个 通用 的 多 项 选择 器 的 视图 层 示例 : 


























<view class="weui-cells_title"> 
Sik (Gi: {{countries}}) </view> 
<view class="weui-cells weui-cells_after-title"> 


<checkbox-group data-name="countries" bindchange="onCheckboxChange"> 
<label class="weui-cell weui-check_label" wx:for="{{[' 美 国 ', ' 法 国 ', "中 国 '] }}" wx:key="*this"> 


<view class="weui-cell__hd"> 


<checkbox color="red" style="color:red" value="{ {item}}"/> 


</view> 
<view class="weui-cell bd">{{item}}</view> 
</label> m 
</checkbox-group> 
</view> 








运行 效果 如 图 13-3 所 示 。 























checkbox eee 


多 选 (已 选 : 美国 ,法 国 ) 
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选择 后 的 效果 如 图 13-4 所 示 。 





多 选项 目 checkbox 有 如 下 4 个 属性 。 





“ value: checkbox 的 标识 ， 选 中 时 触发 checkbox-group 的 change 事 件 。 
- disabled: 是 否 禁用 。 
- checked: 当前 是 否 选中 。 


-color: 表示 中 间 对 久 的 颜色 ， 格 式 同 css 的 color。 




















属性 value 设 置 的 值 体现 在 checkbox-group 的 选择 值 中 。checkbox-group 的 选择 值 是 一 个 数组 。 属 性 color 设 置 的 颜色 是 选择 对 钩 的 颜色 ， 如 图 13-4 所 示 。 选 择 框 的 颜色 目前 无 法 定制 。 


下 面 的 代码 是 通过 bindchange 绑 定 的 onCheckboxChange 方 法 。 





onCheckboxChange: function (e) { 
var fieldName = e.currentTarget.dataset.name 
var data = {} 
data[fieldName] = e.detail.value 
this.setData (data) 

} 

















在 onCheckboxChange 方 法 中 ， 通 过 e.detail.value 获 取 到 的 值 是 一 个 数组 ， 是 所 有 被 选择 的 选择 项 目的 值 。 








13.3 form 














对 于 表单 ， 官 方 文档 给 出 的 解释 是 ， 将 组 件 内 的 用 户 输入 的 <switch/> <input/> <checkbox/> <slider/> <radio/><picker/>。 但 事实 上 ， 并 非 只 有 这 6 个 组 件 可 以 放 在 form 容 器 内 ， 其 他 组 件 (例如 
textarea) 也 可 以 ， 代 码 如 下 所 示 ， 倒 数 11 行 便 是 textarea 组 件 。formType 属 性 为 submit 的 按钮 ， 是 表单 提交 按钮 。formType 属 性 为 reset 的 按钮 ， 是 表单 重 设 按钮 。 























<form catchsubmit="formSubmit" catchreset="formReset"> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell_switch"> 


<view class="weui-cell__bd">switch</view> 
<view class="weui-cell_ ft"> 
<switch name="switch" checked /> 
</view> 
</view> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell__hd">~ 
<view class="weui-label">input</view> 
</view> 
<view class="weui-cell bd"> 
<input name="input" class="weui-input" Placeholder=" 请 输入 文本 " /> 
</view> 
</view> 
</view> 
<view class="weui-cells title"> 多 项 选项 器 countries</view> 
<view class="weui-cells weui-cells_after-title"> 
<checkbox-group name="countries"> 
<label class="weui-cell weui-check label" wx:for="{{[' 美 国 ', ' 法 国 ', ' 中 国 '] }}" wx:key="*this"> 
<view class="weui-cell hd"> ~~ 
<checkbox color="red" style="color:red" value="{{item}}"/> 
</view> 
<view class="weui-cell bd">{{item}}</view> 
</label> 
</checkbox-group> 
</view> 





<view class="weui-cells title"> 滑 动 选择 器 slider</view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell weui-cell input"> 
<view class="weui-cell__hd">~ 
<view class="weui-label">slider</view> 
</view> 
<view class="weui-cell__bd"> 
<slider name="slider" max="10" value=" 
</view> 
</view> 
</view> 





show-value/> 


<view class="weui-cel1s_ title"> 单 项 选择 器 color</view> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell bd"> ~ 
<radio-group name="color" data-name="activeColor" bindchange= "onRadioChange"> 
<label class="weui-cell weui-check_label" wx:for="{{['#l0AEFF', '#ff00ff', '#aaAEFF']}}" wx:key="value"> 








<radio class="weui-check" value="{{item}}" checked="{ {item == activeColor}}"/> 
<view class="weui-cell bd" style="color: { {item}}">{ {item} }</view> 
<view class="weui-cell_ ft weui-cell_ ft_in-radio" wx:if= "{ {item activeColor}}"> 





<icon class="weui-icon-radio" type="success_no_ circle" size="16"></icon> 
</view> ee 
</label> 
</radio-group> 
</view> 
</view> 


<view class="weui-cells title"> 省 市 region</view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell weui-cell_access"> 
<view class="weui-cell bd"> 
<picker name="region" mode="region" data-name="region" onRegionPickerChange value="{{[' 广 东 省 '，' 广 州 市 '，' 海 珠 区 '] }}"> 
<text wx:i {{region}}">{{region[0]}}, {{region[1] }}, {{region[2] }}</text> 








<text wx:else> 选 择 </text> 
</picker> 
</view> 
<view class="weui-cell_ ft weui-cell ft in-access"></view> 
</view> Ea 
</view> 


<view class="weui-cells title"> 文 本 域 textarea</view> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell"> E 
<view class="weui-cell__bd"> 
<textarea name="textarea" class="weui-textarea" placeholder=" 请 输入 文本 " style="height: 3.3em" /> 
<view class="weui-textarea-counter">0/200</view> 
</view> 
</view> 
</view> 


<view class="weui-btn-area"> 
<button type="primary" formType="submit"> Submit</button> 
<button formType="reset">Reset</button> 
</view> 
</form> 





上 述 代码 的 运行 效果 如 图 13-5 所 示 ， 单 击 Submit 按 钮 ， 控 制 台 就 会 打印 表单 数据 ; 单 击 Reset 按 钮 ， 所 有 表单 数据 就 会 清 








form eee 


switch 





input 请 输入 文本 


多 项 选项 器 countries 


美国 
法 国 
中 国 
滑动 选择 器 slider 
slider 
单项 选择 器 color 
#10AEFF 
#ffOOff 
#aaAEFF 
省 市 region 
选择 


文本 域 textarea 


请 输入 文本 


0/200 

















1 一 次 性 获取 所 有 表单 数据 





单 击 Submit 按 钮 ， 将 会 触发 formSubmit 方 法 ， 代 码 如 下 所 示 : 





formSubmit: function (e) { 
console.log('form 发 生 了 submit 事 件 ， 携 带 数 据 为 : ', e.detail.value) 








图 13-6 是 formSsubmit 函 数 的 输出 。 











submit 事 件 携带 的 detail,value 是 一 个 字典 。 键 名 是 表单 内 输入 交互 组 件 的 name。 如 图 13-7 所 示 ， 方 框 内 便 是 输入 交互 组 件 的 name 属 性 。 


formR# T submit#F, REBRBA: 
VObject {switch: true, input: “text", countries: Array[2], slider: 1, color: “#ff@OTTf"..} 
color: "#ff00ff" 
> countries: Array[2] 
input: "text" 
> region: Array [3] 
slider: 1 
Switch: true 
textarea: “mutilines" 

















图 13-6 








<view class="weui-cells title"> 省 市 region</view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell weui-cell access"> 
<view class="weui-cell bd"> 
<picker[name="region" }mode="region" data-name="region" 
value="((U'TRA', "TMB, :海珠 区 '] }}"> 
<text wx:if="{{region}}">{{region[0]}},{{rxregion(i1]}},{{region[2)] }}</text> 
<text wx:else> 选 择 </text> 
</picker> 
</view> 
<view class="weui-cell ft weui-cell_ ft _in-access"></view> 
</view> 


</view> 
<view class="weui-cells title"> 文 本 域 cextarea</view> 


<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell"> 
<view class="weui-cell ba"> 
<textare class="weui-textarea" placeholder=" 请 输入 文本 " 
style="height: 3.3em" /> 
<view class="weui-textarea-counter">0/200</view> 





</view> 
</view> 


</view> 





13-7 











SH, REEF LA RAS, ORS CRATE. 





使 用 表单 容器 form， 以 及 相关 的 formType 为 submit 的 提交 按钮 和 formType 为 reset 的 重 


2. 在 reset 事 件 函数 中 处 理 意外 情况 





在 准备 上 述 示例 的 过 程 中 ， 曾 出 现 了 一 个 意外 的 情况 一 一 单 击 Reset 按 钮 ， 已 选择 的 color 并 不 能 清空 ， 如 图 13-8 所 示 。 








这 是 因为 图 13-8 所 示 的 视觉 效果 并 不 是 由 单项 选择 器 radio-group 和 单项 选择 组 件 radio 决 定 的 ， 而 是 使 用 view、icon 组 件 自 定义 显示 的 。 示 例 代 码 如 下 ， 粗 体 部 分 是 自 定 义 选 择 义 的 标签 代码 。 








<view class="weui-cel1s_title"> 单 项 选择 器 color</view> 
<view class="weui-cells weui-cells_after-title"> 


<view class="weui-cell_bd"> 
<radio-group name="color" data-name="activeColor" bindchange= "onRadioChange"> 


<label class="weui-cell weui-check label" wx:for="{{['#1l0AEFF','#£f£00ff', '#aaAEFF']}}" 

wx: key="value"> E 
<radio class="weui-check" value=" {{item}}" checked="{ {item == activeColor}}"/> 
<view class="weui-cell__bd" style="color: {{item}}">{{item}}</view> 
<view class="weui-cell__ft weui-cell ft in-radio" wx:if="{{item == activeColor}}"> 

<icon class="weui-icon-radio" type="success_no_circle" size="16"></icon> 

</view> 

</label> 

</radio-group> 


</view> 
</view> 





单项 选择 器 color 


#10AEFF 


#ffOOff dd 


#aaAEFF 
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解决 这 个 问题 ， 需 要 在 表单 的 重 设 事件 函数 里 处 理 。 笔 者 通过 catchreset 将 重 设 事件 绑 定 到 formReset 函 数 。formReset 函 数 的 代码 如 下 : 























formReset: function (e) { 
console. log ('form 发 生 了 reset 事 件 ') 
this.setData ({ 
activeColor: '' 








H) 
} 





在 formReset 函 数 中 ， 将 页 面 变 量 activeColor 清 空 ， 这 样 就 实现 了 自 定义 radio 的 选择 样式 清空 。 





3.form 的 属性 














表单 容器 组 件 form 有 如 下 三 个 属性 。 其 中 bindsubmit 和 bindreset 是 事件 属性 ; 另 一 种 绑 定 这 两 种 事件 的 写法 分 别 是 catchsubpmit 和 catchreset。 





“ report-submit: 确定 是 否 返回 formId， 可 用 于 发 送 模板 消息 。 
“ bindsubmit: 携带 form 中 的 数据 触发 submit 事 件 ，event.detail={value: {'name': 'value'}, formld: "}。 


* bindreset: 表单 重 置 时 会 触发 reset 事 件 。 








如 下 面 的 代码 所 示 ， 当 form 为 report-submit 属 性 时 ，submit 事 件 会 带 一 个 detail.formld。formld 将 用 于 模板 消息 的 发 送 ， 在 这 里 不 作 展 示 描述 。 





formSubmit: function (e) { pA i 
console.1log('form 发 生 了 submit 事 件 ， 携 带 数 据 为 : ', e.detail.value) 
console.10g('form 发 生 了 submit 事 件 ，formId: ', e.detail.formId) 








} 





13.4 input 


每 个 小 程序 组 件 的 属性 都 是 针对 特定 的 需求 场景 而 设计 的 ， 本 节 将 尝试 列举 几 个 input 组 件 的 场景 实例 。 以 下 示例 会 涉及 输入 法 面板 ， 需 要 在 手机 上 进行 测试 。 





1. 自 动 聚焦 





当 用 户 单 击 进入 新 页 面 时 ， 如 何 实现 将 焦点 自动 定位 于 某 个 输入 框 ， 并 呼出 文本 输入 法 面板 呢 ? 效果 如 图 13-9 所 示 。 





X input +e. 


自动 聚集 ty 


上 4 
了 B 


请 输入 用 户 名 
heen 


eke N, 


将 会 获取 焦点 

控制 最 大 输入 长 度 的 input 
最 大 输入 长 度 为 10 
实时 获取 输入 值 : 

输入 同步 到 view 中 


控制 输入 的 input 
SELF ROAR AN 1 aE RD 



































使 用 input 组 件 的 focus 属 性 可 以 实现 这 个 功能 ， 代 码 如 下 : 














<input focus type="text" class="weui-input" maxlength="140" 
Placeholder2" 请 内 入 文本 " /> 

















在 上 述 代 码 中 ，type 属 性 用 于 指示 呼出 的 输入 法 面板 类 型 ， 共 有 4 个 有 效 值 ， 具 体 如 下 。 














text: 文本 输入 键盘 。 
‘number: 数字 输入 键盘 。 
“ idcard: 身份 证 输入 键盘 。 


“digit: 带 小 数 点 的 数字 键盘 。 




















性 的 用 法 相同 。placeholder-class 属 性 则 是 以 类 样式 名 设置 占 位 符 的 





























placeholder 属 性 是 输入 内 容 为 空 的 占 位 符 文本 ， 默 认为 空 。placeholder-style 用 于 设置 占 位 符 的 内 嵌 样 式 ， 与 一 般 组 件 的 style 属 
样式 ， 其 用 法 与 一 般 组 件 的 class 属 性 相同 。 






































maxlength 属 性 用 于 设置 最 大 输入 长 度 ， 设 置 为 -1 的 时 候 不 限制 最 大 长 度 。 



































在 一 些 旧 的 小 程序 教程 代码 甚至 微 信 官 方 的 示例 代码 中 ， 还 可 以 看 到 auto-focus 属 性 ， 它 和 focus 属 性 的 作用 完全 相同 ， 但 该 属性 已 经 废止 ， 建 议 用 focus 蔡 代 。 


























每 个 input 组 件 都 可 以 设置 focus 属 性 ， 但 是 每 个 屏幕 只 有 一 个 焦点 ， 如 果 将 两 个 或 两 个 以 上 的 input 组 件 设置 成 了 focus 属 性 ， 那 么 焦点 将 聚 于 何 处 ? 









































答案 是 聚 于 最 后 一 个 设置 focus 属 性 的 input 组 件 之 上 。 最 后 一 个 并 不 一 定 是 wxml 文 件 里 最 下 方 的 一 个 ， 如 果 使 用 了 动态 绑 定 ， 那 么 在 页 面 加 载 之 后 会 动态 设置 某 个 或 某 些 input 组 件 的 focus 属 性 ， 这 时 
就 取决 于 谁 是 最 后 设置 的 了 。 


2. 密 码 输入 











为 了 避免 旁人 看 见 密码 文本 ， 可 设置 password 属 性 使 内 容 以 “*” 号 显示 ， 效 果 等同 于 html 标 签 的 密码 输入 文本 框 。 代 码 如 下 : 





<input password type="number" class="weui-input" placeholder=" 请 输入 密码 " /> 





3. 使 用 单行 文本 框 输入 多 行文 本 














使 用 单行 文本 框 模拟 多 行文 本 的 输入 ， 效 果 如 图 13-10 所 示 。 




















x input "9" 


a. ` rn 全 


人 a’ 4 
4} 4 ASS 


可 以 自动 聚焦 的 input 
将 会 获取 焦点 





图 13-10 


在 下 面 的 代码 中 ， 上 面 是 视图 层 标签 代码 ， 下 面 是 逻辑 层 JS 代码 。 通 过 confirm-hold 属 性 ， 可 使 用 户 在 单 击 键盘 右 下 角 的 按钮 时 保持 键盘 不 收 起 ，confirm-type 属 性 用 于 定义 右 下 角 按 钮 的 文本 (在 
Android 上 测试 无 效 ) 。 通 过 bindconfirm 绑 定 onInput1Confirm 方 法 ， 即 可 在 每 次 确定 后 将 新 内 容 追 加 到 页 面 变量 input1Total 中 ， 并 将 input 组 件 的 value 变 量 input1 置 空 。 








<view class="weui-cells title"> 单 击 完成 ， 不 隐藏 输入 法 面板 </view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell__bd"> 
<input bindconfirm="onInput1Confirm" value="{{input1}}" 
confjirm-type=" 确 定 " confirm-hold class="weui-input" Placeholder=" 完 成 后 单 击 确定 " /> 
</view> 
</view> 
</view> 
<view class="weui-cells__tips"><text> {{input1Total}}< /text></view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
data: { 
inputlTotal:'', 
input1:'', 





r 
onInput1Confirm (e) { 
console.log (e.detail.value) 
let newValue = e.detail.value 
if (this.data.inputlTotal) newValue = this.data.inputlTotal + "\n" + newValue 
this.setData ({ 
inputlTotal: newValue, 
input1:'' 
}) 





4 如 何 扩展 输入 法 面板 

当 用 户 单 击 一 个 文本 框 开始 输入 内 容 时 ， 能 不 能 在 输入 法 面板 上 方 显 示 一 个 颜色 拾取 器 ， 用 于 设置 文本 内 容 的 颜色 呢 ? 
答案 是 可 以 的 ， 效 果 如 图 13-11 所 示 。 

文本 的 默认 颜色 是 黑色 ， 单 击 “ 颜 色 ” 按 钮 ， 文 本 颜色 将 变 为 红色 。 


这 个 效果 是 通过 input 组 件 的 cursor-spacing 属 性 实现 的 。 


cursor-spacing 属 性 用 于 指定 光标 与 键盘 的 距离 ， 单 位 为 px。 取 input 距 离 底部 的 距离 和 cursor-spacing 指 定 距离 的 最 小 值 作为 光标 与 键盘 的 距离 ， 默 认 值 为 0。 


X input 
其 它 无 关内 容 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 


设置 文本 颜色 


单 击 颜色 按钮 | 


X input 
其 它 无 关内 容 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 
2222222222 


设置 文本 颜色 


图 13-11 





如 果 input 框 的 位 置 太 靠 上 ， 与 输入 法 面板 相隔 很 远 ， 则 input 的 位 置 既 不 取 其 距离 底部 的 距离 ， 也 不 取 cursor-spacing 值 ， 而 是 取决 于 上 边缘 距离 顶部 的 距离 。 为 了 避免 这 种 情况 ， 影 响 测试 ， 笔 者 在 


input 组 件 上 方 填充 了 一 些 “ 无 关内 容 ”。 


在 下 面 的 代码 中 ， 通 过 绑 定 blur 与 focus 事 件 ， 分 别 在 onBlur 和 onFocus 方 法 中 设置 了 扩展 面板 的 隐藏 与 显示 。 当 单 击 “ 颜 色 ” 按 钮 时 ， 改 变 页 面 变量 textColor， 即 可 改变 输入 框 文本 的 颜色 。 





<view class="weui-cells title"> 设 置 文本 颜色 </view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell_bd"> 
<input cursor-spacing="50" style="color: {{textColor}}" 
bindblur="onBlur" bindfocus="onFocus" class="weui-input" value="#d 


</view> 
</view> 


<view class="weui-flex spacing" style="position: absolute; width:100%; display: {{inputPanelExtVisible ? 'block' : 
<view class="weui-flex_item"> 





<button bindtap="onTapColor" class="weui-btn mini-btn" type="warn" size="mini">pifa</button> 


</view> 
</view> 
</view> 
<text> 


http://www. hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


data: { 


inputPanelExtVisible: false, 
textColor:'dark', 


} 
onTapColor () { 


var color = "red" 
if (this.data.textColor 
color = 'blue' 


this.setData ({ 


) 
}, 
onBlur () { 

this.setData ({ 


) 
}, 
onFocus () { 

this.setData ({ 





) 


textColor: color 


inputPanelExtVisible: false 


inputPanelExtVisible: true 


"none'}}"> 





Oza 该 效果 仅 作为 场景 测试 的 示例 ，UI 有 些 粗粮 ， 如 果 要 应 用 于 实际 项 目 之 中 ， 读 者 可 以 自行 尝试 优化 视觉 效果 。 


13.5 label 


























热点 区 域 是 看 不 见 的 隐藏 区 域 ， 所 以 将 它们 放 在 一 张 图 片上 面 ， 
区 域 ， 实 则 是 单 击 图 片上 的 特定 部 位 。 
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<img src="img.jpg" border="0" usemap="#map" /> 

<map name="map"> 
<area shape="rect" coords="20,20,40,40" href="about.html" /> 
<area shape="circle" coords="80,70,20" href="clearfix.html" /> 


<area shape="poly" coords="280, 323, 323,435,100, 300,287, 45, 34,344" href="position.html" /> 
</map> 





在 小 程序 中 ， 有 没有 办 法 实现 类 似 的 热点 功能 呢 ? 








答案 是 可 以 的 ， 使 用 label 组 件 。 




















label 组 件 可 以 扩展 目标 组 件 的 可 单 击 区 域 。 有 两 种 使 用 方法 : 





























“ 一 是 使 用 for 属 性 指定 目标 组 件 的 id， 单 击 label 区 域 时 ， 即 相当 于 单 击 目标 组 件 。 


“ 二 是 将 目标 组 件 作为 子 标签 直接 放 在 label 组 件 内 部 。 





1. 扩 展 多 选项 目 checkbox 








checkbox 组 件 本 身 没 有 文本 ， 必 须 借助 label 组 件 扩展 可 单 击 区域 。 图 13-12 是 下 面 所 示 代 码 的 运行 效果 。 若 不 是 将 checkbox 组 件 放 在 label 标 签 的 内 部 ， 则 单 击 “ 选 项 2” 时 ， 第 二 个 多 选项 目 是 不 会 
被 选中 的 。 


























<view class="weui-cells weui-cells_after-title"> 
<checkbox-group> 
<label class="weui-cell weui-check label" wx:for="{{[' 选 项 1',' 选 项 2', ' 选 项 3'] }}" 
<checkbox value="{{item}}"></checkbox> 
<view class="weui-cell bd">{{item}}</view> 
</label> gi 
</checkbox-group> 
</view> 


wx:key="*this"> 


label eee 
复 选 列表 项 
选项 1 
选项 2 
选项 3 


图 13-12 











2. 扩 展 单 选项 目 radio 















































同 checkbox 一 样 ， 单 选项 目 radio 同 样 没有 默认 标签 文本 ， 必 须 使 用 label 组 件 进行 扩展 。 图 13-13 是 下 面 所 示 代码 的 运行 效果 。 扩 





展 项 目 这 两 段 代 码 相 类 似 ， 都 是 使 用 label 组 件 扩 展 目标 组 件 的 单 击 





XI 














域 ; 不 同 点 在 于 ， 扩 展 单 选项 目 radio 的 代码 使 用 了 label 的 for 属 性 ， 一 个 label 的 for 属 性 对 应 于 一 个 radio 的 id。 





<view class="weui-cells title"> 单 选 列表 项 </view> 
<view class="weui-cells weui-cells_after-title"> 


<radio-group bindchange="radioChange"> 
<view class="weui-cell" wx:for="{{[' 选 项 1', ' 选 项 2', ' 选 项 3'] }}" wx:key="*this"> 


<radio id="radio{{index}}" value="{{item}}"/> 
<label for="radio{ {index}}" class="weui-check label"> 
<view class="weui-cell bd">{{item}}</view> 
</label> = 
</view> 
</radio-group> 
</view> 


单 选 列表 项 
© 选项 1 


选项 2 





选项 3 


图 13-13 


3. 扩 展 switch 组 件 














扩展 switch 组 件 与 扩展 checkbox、radio 类 似 ， 示 例 代码 如 下 ， 其 运行 效果 如 图 13-14 所 示 。 








<view class="weui-cells title"> 扩 展 switch</view> 
<view class="weui-cells weui-cells after-title"> 
<label class="weui-cell weui-cell switch"> 
<view class="weui-cell__bd">Jf&</view> 
<view class="weui-cell_ ft"> 
<switch checked /> 
</view> 
</label> 
</view> 


扩展 Switch 
开关 











图 13-14 


4. 如 何 实现 热点 功能 





除了 扩展 radio、checkbox 和 switch 以 外 ，label 还 可 以 扩展 button 组 件 ， 方 法 与 上 面 的 类 似 。 


label 


建 一 个 绘图 上 下 文 对 象 ctx， 接 着 在 ctx 对 象 上 绘制 一 个 黑 三 角形 ， 运 行 效果 如 图 13-15 所 示 。 


标签 内 部 不 仅 可 以 放 文 本 ， 还 可 以 放 画 布 。 在 如 下 代码 中 ， 在 label 标 签 内 部 声明 了 一 个 id 为 “firstCanvas” 的 canvas。 在 页 面 周期 函数 onReady 中 ， 使 用 小 程序 接口 wx.createCanvasContext 创 

















us) 














<label for="switch1"> 
<canvas style="width: 400px; height: 500px;" canvas-id="firstCanvas"></canvas> 


</label> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


onReady (e) { 
var ctx = wx.createCanvasContext ('firstCanvas') 
ctx.moveTo(10, 10) 
ctx.lineTo(100, 10) 





ctx.lineTo(100, 100) 
etx. £111) 
ctx.draw () 

















在 上 面 的 代码 中 ， 指 定 了 label 的 for 属 性 为 “switch1”， 当 单 击 图 13-15 中 的 黑 三 角形 时 ， 图 示 中 的 开关 也 随 之 变化 。 使 用 小 程序 的 绘图 API 可 以 绘制 不 同 的 形状 ， 当 把 形状 绘制 为 透明 并 覆盖 放 在 一 张 
图 片上 时 ， 就 是 热点 功能 。 
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图 13-15 


13.6 picker 























picker 是 从 底部 弹 起 的 滚动 选择 器 ， 目 前 支持 5 种 选择 器 (通过 mode 属 性 来 区 分 ) ， 分 别 是 单列 选择 器 、 多 列 选择 器 、 时 间 选 择 器 、 日 期 选择 器 和 省 市 区 选择 器 。 



































mode 属 性 的 有 效 值 范围 如 下 。 











+ 单 选 : selector。 


+ iż: multiSelector。 


"时间: times 
- ASA: date. 
-A Ñ: region. 


mode 的 默认 值 是 selector。 























multiSelector 是 选择 器 的 底层 模式 ，selector 是 其 一 维 数组 的 简化 模式 ，time、date 和 region 是 其 特定 场景 下 具有 特定 数据 结构 的 特殊 模式 。 




















为 什么 这 样 讲 ? 看 了 多 列 选择 器 的 使 用 示例 就 明白 了 。 














1. 多 列 选择 器 














在 下 面 的 代码 中 ， 展 示 了 一 个 mode 为 multiSelector 的 多 列 选择 器 ， 运 行 效果 如 图 13-16 所 示 。 多 列 选择 器 有 一 个 名 为 columnchange 的 事件 ， 当 多 列 中 的 一 列 选择 项 发 生 改 变 时 ， 该 事件 将 被 触发 ， 
其 event.detail 等 于 {column: column, value: value}。 其 中 ，onPicker-ColumnChange 是 绑 定 在 columnchange 事 件 上 的 函数 ， 当 column 等 于 0 时 ， 即 左 1 列 选择 变化 时 ， 会 动态 修改 左 2 列 绑 定 的 数据 
multiArray[1]， 这 时 左 2 列 的 视图 即 发 生 改变 。 



















































































其 他 模式 的 选择 器 ， 像 时 间 选 择 器 、 日 期 选择 器 、 省 市 选择 器 ， 都 是 动态 变化 数据 的 多 列 选择 器 。 微 信 团 队 为 了 简便 开发 ， 方 便 开发 者 使 用 ， 已 经 将 组 件 场景 化 封装 在 了 特定 场景 化 的 逻辑 代码 中 。 























<view class="weui-cells title"> 多 项 选择 器 </view> 
<view class="weui-cells weui-cells after-title"> 
<label class="weui-cell"> 
<view class="weui-cell_hd"> 
<view class="weui-label"> 当 前 选择 </view> 
</view> 
<view class="weui-cell bd"> 
<picker mode="multiSelector" data-name="multiIndex" 
bindcolumnchange="0nPickerColumnChange" 
bindchange="onPickerChange" range="{ {multiArray}}"> 
<view>{ {multiArray[0] [multiIndex[0]]}}, {{multiArray[1] [multiIndex[1]]}},  {{multiArray[2] [multiIndex[2]]}}</view> 
</picker> 
</view> 
</label> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


data: { 
array: [" 中 国 '， "美国 '， "巴西 '， "日 本 '] ， 
objectArray: [ 
{ 

















name: ' 美 国 ' 


id: 1, 
name: ' 中 国 ' 


Td ds 
name: ' 巴 西 ' 


id: 3, 
name: 'HÆ' 
} 

l, 


multiArray: [EARS AEA, " 扁 性 动物 '， "线形 动物 '，“' 环 节 动 物 '， Heo, 


ty 
onPickerColumnChange (e) { 
let column = e.detail.column 
let newValue = e.detail.value 
let multiArray = this.data.multiArray 


if (column == 0) { 


if (newValue == 0) { 

multiArray[1] = [' 扁 性 动物 '，' 线 形 动物 '，' 环 节 动 物 '， 
}else{ 

multiArray[1] = [" 有 颌 鱼 '， ' 总 鳍 鱼 '， ' 两 栖 动物 '， Et 
} 


this.setData ({ 
"multiArray": multiArray 
3) 
} 
ty 
onPickerChange: function (e) { 
var fieldName = e.currentTarget.dataset.name 
var data = {} 
data[fieldName] = e.detail.value 
this.setData (data) 


' 软 体 动物 ' ，' 节 歧 动物 '] 


生动 物 ' ，' 鸟 类 '，' 哺 乳 动物 '] 





多 项 选择 器 


脊柱 动物 ， 有 颌 鱼 ， 猪 


当前 选择 Ah 








图 13-16 


在 上 面 的 代码 中 ，picker 组 件 有 一 个 通用 的 change 事 件 函 数 onPickerChange。 这 个 函数 的 作用 就 是 以 picker 组 件 上 名 为 name 的 dataset 值 作为 变量 名 ， 将 picker 的 change 事 件 的 变化 值 存 储 到 页 面 数 
据 对 象 data 中 。 下 面 讲 到 的 选择 器 ， 如 单列 选择 器 、 时 间 选 择 器 等 ， 都 有 用 到 这 个 函数 ， 使 用 方法 也 是 一 样 的 。 这 个 函数 是 通用 的 编程 模式 ， 将 它 复制 一 下 就 可 以 放 在 使 用 picker 组 件 的 任何 项 目 之 中 ， 它 
已 被 包含 在 sim.js 类 库 中 。 关 于 sim.js 类 库 的 使 用 ， 参 见 2.1.4 节 的 相关 内 容 。 


2 单列 选择 器 


下 面 代码 所 示 的 是 mode 为 selector 的 单列 普通 选择 器 ，array 是 绑 定 在 该 组 件 上 的 页 面 数据 。 单 列 选择 器 的 change 事 件 的 event.detail 等 于 {value: value}， 其 中 value 是 array 的 索引 值 ， 并 非 元 素 值 , 
所 以 在 视图 上 array[single] 代 表 已 选择 的 元 素 值 。 运 行 效果 如 图 13-17 所 示 。 








<view class="weui-cells title"> 单 项 选择 器 </view> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell__hd"> 
<view class="weui-Iabel"> 当 前 选择 </view> 
</view> 
<view class="weui-cell_bd"> 
<picker mode="selector" data-name="single" 
bindchange="onPickerChange" range="{ {array} }"> 
<view class="weui-input">{ {array [single] }}</view> 
</picker> 
</view> 
</view> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
array: ["PH', ' 美 国 '， "巴西 '， "日 本 '] 

















picker eee 





中 国 


单项 选择 器 
当前 选择 








考虑 到 多 数 情况 下 picker 绑 定 的 数据 元 素 是 Object 对 象 ， 所 以 微 信 团 队 添 加 了 另外 一 个 属性 range-key。 当 ] 


picker 


图 13-17 





目 仅 当 mode 为 selector 或 multiselector 时 ，range 属 性 可 用 ， 同 时 range-key 属 性 可 用 。 














range 是 一 个 Object Array 时 ， 通 过 range-key 来 指定 Object 中 key 的 值 作为 选择 器 显示 的 内 


在 如 下 代码 中 ，objectArray 是 一 个 以 Object 为 元 素 类 型 的 数组 ， 每 个 元 素 都 有 id 和 name 两 个 字段 。 通 过 range-key 


容 。 下 








回 























的 代码 中 就 使 用 了 range-key 属 性 。 









































属性 指定 name 字 段 作 为 picker 组 件 在 选择 器 中 显示 的 文本 。 





<view class="weui-cells title"> 单 项 选择 器 (使 用 range-key) </view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell_hd"> ~ 
<view class="weui-label"> 当 前 选择 </view> 
</view> 
<view class="weui-cell bd"> 
<picker mode="selector" data-name="single2" 
bindchange="onPickerChange" range="{{objectArray}}" range-key="name"> 
<view class="weui-input">{{objectArray[single2] .name}}</view> 
</picker> 
</view> 
</view> 
</view> 


http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


objectArray: [ 
{ 
id: 0, 
name: ' 美 国 ' 


id: 1, 
name: ' 中 国 ' 


id: 2, 
name: ' 巴 西 ' 


id: 3, 
name: ' 日 本 ' 





3. 时 间 选 择 器 











[R] 














如 下 代码 所 示 为 一 个 mode 为 time 的 选择 器 ， 其 运行 效果 如 
A "hh: mm”。value 属 性 表示 选中 的 时 间 ， 字 符 串 格 式 为 “hh: mm” , 








13-18 所 示 。 其 中 ，start 属 性 表示 有 效 时 间 范 围 的 开始 ， 字 符 





格式 为 “hh: mm” , end, 





属性 表示 有 效 时 间 范 围 的 结束 ， 字 符 捉 格式 





<view class="weui-cells title"> 时 间 选 择 器 </view> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell hd"> 
<view class="weui-Iabel"> 当 前 选择 </view> 
</view> 
<view class="weui-cell__bd"> 
<picker mode="time" data-name="time" value="{{time}}" 
start="09:01" end="21:01" value="01:00" bindchange="onPickerChange"> 
<view class="weui-input">{ {time} }</view> 
</picker> 
</view> 
</view> 
</view> 








时 间 选 择 器 


SEI 09:00 


picker eee 





取消 确定 
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4. 日 期 选择 器 





如 下 代码 所 示 的 是 一 个 日 期 选择 器 。value 属 性 表示 选中 的 日 期 ， 格 式 为 “YYYY-MM-DD”。start 表 示 有 效 日 期 范围 的 开始 ， 字 符 串 格式 为 “YYYY-MM-DD”。end 表 示 有 效 日 期 范围 的 结束 ， 字 符 
串 格式 为 “YYYY-MM-DD”。 其 运行 效果 如 图 13-19 所 示 。 











<view class="weui-cel1s_title"> 日 期 选择 器 </view> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell__hd"> 
<view class="weui-Iabel"> 当 前 选择 </view> 
</view> 
<view class="weui-cell__bd"> 
<picker mode="date" data-name="date" value="{ {date}}" 
start="2015-09-01" end="2017-09-01" value="2015-09- 02" bindchange="onPickerChange"> 
<view class="weui-input">{ {date} }</view> 
</picker> 
</view> 
</view> 





日 期 选择 器 
当前 选择 2015-09-02 


picker eee 








BGH 
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fields 属 性 表示 选择 器 的 粒 | 





5. 省 市 选择 器 





如 下 代码 所 示 的 是 一 个 省 市 选择 器 。value 属 性 表示 选中 的 省 、 市 、 区 三 项 ， 是 一 个 数组 。 其 运行 效果 如 





度 ， 默 认为 “year，month，day”。 如 果 改 成 “year，month” ， 那 么 选择 器 视图 


将 只 显示 年 、 月 两 列 。 


图 13-20 所 示 。 


确定 








<view class="weui-cells title"> 省 市 选择 器 </view> 
<view class="weui-cells weui-cells_after-title"> 


<picker mode="region" data-name="region" 
value="{{[' 广 东 省 '，' 广 州 市 '，' 海 珠 区 '] }}" bindchange= "onPickerChange"> 
<label class="weui-cell"> 
<view class="weui-cell hd"> 
<view class="weui-Iabel"> 当 前 选择 </view> 
</view> 
<view class="weui-cell_bd"> 
<view>{ {region} }</view> 
</view> 
</label> 
</picker> 
</view> 








省 市 选 








picker eee 
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微 信 团队 在 省 市 选择 器 内 部 封装 了 国内 的 省 市 数据 ， 当 左 侧 第 1 列 选择 的 省 发 生变 化 时 ， 将 自动 触发 第 2 列 市 的 数据 变化 ， 是 一 个 典型 的 三 级 多 列 选择 器 





13.7 picker-view 











picker-view 是 嵌入 页 面 的 滚动 选择 器 ，picker 组 件 基于 picker-view 组 件 实现 ， 当 单 击 picker 视 图 时 ， 屏 幕 下 方 将 弹出 一 个 picker-view 选 择 器 。picker-view 既 可 内 用 于 picker 组 件 之 中 ， 也 可 以 单独 使 
。 本 节 将 展示 单独 搜索 picker-view 组 件 的 使 用 场景 。 














在 下 面 的 代码 中 ， 上 面 是 视图 层 代码 ， 下 面 是 逻辑 层 代码 。picker-view 组 件 的 value 属 性 是 一 个 数字 数组 ， 数 组 中 的 数字 依次 表示 picker-view 内 的 picker-view-colume 选 择 的 第 几 项 。indicator-style 
属性 用 于 设置 选择 器 中 间 选 中 框 的 样式 ，indicator-class 用 于 设置 选择 器 中 间 选 中 框 的 样式 类 名 ， 这 两 个 属性 在 开发 中 很 少 用 到 。 





































































































需要 说 明 的 是 ， 在 “let app=getApp () ”这 一 行 上 面 的 代码 是 用 于 初始 化 页 面 数 据 的 。 为 了 简单 起 见 ， 各 月 均 取 了 31 天 。 











<view | 1 期 { {years [value [0]] }}4F 
{ {months [value [1]]}}H { {days [value [2] ]}}H</view> 
<view class="weui-cells weui-cells_after-title"> 
<picker-view style="width: 100%; height: 200px;background-color:#bfc8bc" 
value="{{[1,1,1]}}" data-name="value" bindchange="onPickerChange"> 
<picker-view-column> 
<view wx:for="{{years}}" wx:key="*this" 
style="text-align:center; line-height: 34px">{ {item} }4F</view> 
</picker-view-column> 
<picker-view-column> 
<view wx:for="{{months}}" wx:key="*this" 
style="text-align:center; line-height: 34px">{ {item}}A</view> 
</picker-view-column> 
<picker-view-column> 
<view wx:for="{{days}}" wx:key="*this" 
style="text-align:center; line-height: 34px">{ {item}}H</view> 
</picker-view-column> 
</picker-view> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
const date = new Date() 
const years = [] 
const months = [] 
const days = [] 


for (let i = 1990; i <= date.getFullYear(); i++) { 
years .push (i) 

} 

for (let i = 1; i <= 12; i++) { 
months .push (i) 

} 

for (let i = 1; i <= 31; i++) { 
days .push (i) 


let app = getApp() 
Page (Object .assign ({ 
data: { 
years: years, 
months: months, 
days: days, 
} 
}, app.page)) 





上 述 代码 的 运行 效果 如 图 13-21 所 示 。 选 择 框 之 外 的 渐变 效果 是 通过 设置 picker-view 的 background-color 样 式 形 成 的 。 在 picker-view 组 件 内 部 ， 基 于 选择 框 的 背景 色 应 用 了 CSS 滤 镜 。 


微 信 小 程序 从 0 到 1 练习 eee 


当前 日 期 1992 年 4 月 2 日 
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在 上 述 代码 的 视图 层 代码 中 ， 在 style 属 性 中 设置 picker-view 的 width、height 将 会 非常 重要 ， 如 果 不 设置 这 两 个 样式 ，picker-view 视 图 将 会 无 法 正常 显示 。 


13.8 radio 


radio-group 是 单项 选择 器 ， 内 部 由 多 个 单 选项 目 <radio/ > 组成。 单项 选择 器 适用 于 从 一 个 一 维 数组 中 选择 一 个 元 素 的 场景 。 在 下 面 的 代码 中 ， 视 图 层 代码 展示 的 是 一 个 单项 选择 器 ， 其 运行 效果 如 图 
13-22 所 示 。 











<view class="weuji-cel1s_title"> 单 项 选择 〈 当 前 选择 :{{country}}) </view> 
<view class="weui-cells weui-cells after-title"> 
<radio-group data-name="country" bindchange="onRadioChange"> 
<label class="weui-cell weui-check_ label" 
wx:for="{{[' 美 国 ',' ' "日 本 "英国 !] }}" wxrkey="*this"> 
<view class="weui-cell hd"> 
<radio value="{{item}}" checked="{ {item == country}}"/> 
</view> 
<view class="weui-cell__bd">{{item}}</view> 
</label> 
</radio-group> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
let app = getApp() 
Page (Object.assign ({ 




















data: {} 
}, app.page) ) 














使 用 类 似 于 图 13-22 这 样 的 U1， 视图 简单 清晰 明了 ， 可 将 其 应 用 于 工具 类 小 程序 项 目 中 。 


radio eee 
单项 选择 (当前 选择 : 美国 ) 
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图 13-22 


13.9 slider 

















slider 是 滑动 选择 器 ， 它 是 小 程序 组 件 家 族 里 最 简单 的 组 件 之 一 。 如 下 代码 展示 的 是 一 个 slider 组 件 ， 其 运行 效果 如 图 13-23 所 示 。 


























该 段 代码 的 视图 层 代码 中 (上 部 分 ) 就 使 用 了 slider 组 件 。slider 组 件 具 有 如 下 属性 。 











min: 表示 最 小 值 。 


' max: 表示 最 大 值 。 





‘step: 表示 步 长 ， 取 值 必 须 大 于 0， 并 且 可 被 (max-min) 整除 。 
* backgroundColor: 表示 背景 色 ， 即 图 13-23 中 的 灰色 。 
-activeColor: 表示 已 选择 部 分 的 颜色 ， 即 图 13-23 中 的 红色 。 


- show-value: 表示 是 否 显示 当前 value。 


<view class="weui-cells title"> 滑 动 选择 器 〈 当 前 : {{slider}}) </view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell__hd"> 
<view> 滑 块 </view> 
</view> 
<view class="weui-cell__bd"> 
<slider activeColor="#eb6587" backgroundColor="#bfc8cc" 
Value="2" min="0" max="10" step="2" data-name="slider" 
bindchange="onSliderChange" show-value/> 
</view> 
</view> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
let app = getapp () 
Page (Object .assign ({ 
data: {} 
}, app-page) ) 











图 13-23 所 示 的 UI 效果 ， 可 直接 使 用 于 工具 类 、 效 率 类 小 程序 项 目 之 中 。 
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滑动 选择 器 (当前 : 8) 
滑 块 





图 13-23 


13.10 switch 


switch eee 


switch:true 





checkbox:true A 


图 13-24 


Switch 是 开关 选择 器 ， 除 了 能 显示 经 典 的 iOS 开 关 ， 还 能 显示 checkbox 样 式 。 如 图 13-24 所 示 ， 上 下 两 个 都 是 switch 组 件 ， 第 一 个 type 属 性 为 switch， 第 二 个 type 属 性 为 checkbox， 完 整 的 代码 如 下 所 











ol 





<view class="weui-cells"> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell__bd">switch: {{switch1}}</view> 
<view class="weui-cell ft"> 
<switch checked data-name="switch1" bindchange="onSwitchChange"/> 
</view> 
</view> 
<view class="weui-cell weui-cell_switch"> 
<view class="weui-cell bd">checkbox: { {switch2}}</view> 
<view class="weui-cell ft"> 
<switch color="#eb6587" type="checkbox" data-name="switch2" 
bindchange= "onSwitchChange"/> 
</view> 
</view> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
let app = getApp() 
Page (Object .assign ({ 
data: {} 
}, app-page) ) 

















小 程序 中 的 checkbox 组 件 是 作为 checkbox-group 的 子 组 件 使 用 的 。 对 于 单个 checkbox 的 使 用 需求 ， 可 以 考虑 使 用 switch 组 件 ， 设 置 type 属 性 为 checkbox。 
































13.11 textarea 


textarea 是 多 行 输入 框 ， 当 需要 由 用 户 输入 多 行文 本 时 可 使 用 这 个 组 件 。 如 下 代码 所 示 的 是 textarea 的 用 法 。 其 运行 效果 如 图 13-25 所 示 。 


xX textarea se: 


文本 
0/200 








图 13-25 


下 面 的 代码 中 使 用 了 textarea 组 件 。textarea 组 件 主要 具有 以 下 属性 。 
“ auto-height: 表示 是 否 自动 增高 ， 设 置 auto-height 时 ，style.height 不 生效 。 
focus: 用 于 设置 是 否 自动 聚集 ， 每 个 屏幕 只 能 有 一 个 焦点 。 该 属性 用 于 替代 旧 属 性 auto-focus。 
“ placeholder: 表示 占 位 符 文本 。 
“ placeholder-style: 表示 占 位 符 文本 的 样式 属性 。 
“ placeholder-class: 用 于 设置 占 位 符 的 样式 类 名 。 
+ max-length: 表示 最 大 输入 长 度 ， 设 置 为 -1 的 时 候 不 限制 最 大 长 度 。 


+ cursor-spacing: 该 属性 的 作用 与 input 组 件 的 同名 属性 类 似 ， 但 在 实践 中 ， 该 属性 目前 还 不 能 正常 工作 。 





<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell"> 
<view class="weui-cell_bd"> 
<textarea class="weui-textarea" style= 
"height :20px" auto-height 
focus placeholder=" 文 本 " placeholder- 
style="color:gray" 
maxlength="140" cursor-spacing="0" /> 
<view class="weui-textarea-counter">0/200</view> 
</view> 
</view> 
</view> 





在 图 13-25 中 ， 键 盘 上 方 的 “完成 ”按钮 是 小 程序 默认 添加 的 ， 单 击 该 按钮 将 触发 confirm 事 件 。 





第 14 章 多 媒体 及 其 他 组 件 


本 章 包括 navigator、audio、image、video、map、canvas 6 个 组 件 ， 其 中 navigator 和 image 是 常用 的 组 件 ， 其 他 组 件 在 一 般 的 小 程序 项 目 中 不 会 经 常用 到 ， 但 在 音 视 频 、LBS 类 似 的 项 目 中 是 必用 
组 件 。 


14.1 navigator 


1. 导 航 组 件 


navigator 是 页 面 链接 组 件 ， 相 当 于 html 标 签 集 中 的 a 标 签 。 当 需要 从 一 个 页 面 跳 转 到 另 一 个 页 面 时 ， 使 用 该 组 件 。navigator 组 件 根据 open-type 属 性 的 不 同 ， 分 别 对 应 于 5 个 小 程序 导航 AP1， 具 体 如 
下 。 


， 当 open-type 为 navigate 时 ， 相 当 于 wx.navipgateTo。 

” 当 open-type 为 fedirect 时 ， 相 当 于 wx.redirect。 

< 4open-type A#switchTabat, #4 4 Fwx.switchTab. 

- 4open-type #reLaunch#}, 49 4 Fwx.reLaunch. 

- 4open-type AnavigateBack Ht, 44 24 Fwx.navigateBack. 


如 下 代码 所 示 的 是 5 种 open-type 有 效 值 的 使 用 示例 。hover-class 属 性 代表 组 件 被 单 击 时 的 样式 类 名 ， 默 认 值 为 “navigator-hover”， 在 wxss 文 件 中 重 写 该 样式 类 ， 可 以 覆盖 默认 样式 。 其 运行 效果 如 
图 14-1 所 示 。 





<view class="weui-btn-area"> 
<navigator url="navigator?title=navigate" open-type="navigate" 
hover-class="navigator-hover"> 
<button type="default">navigate: 新 窗口 打开 </button> 





</navigator> 
<navigator url="navigator?title=redirect" open-type="redirect" 
hover-class="navigator-hover"> 
<button type="default">redirect: 在 当前 页 打开 </button> 
</navigator> 
<navigator url="navigator" open-type="switchTab" 
hover-class="navigator-hover"> 
<button type="default">switchTab: 切 换 tab</button> 
</navigator> 
<navigator url="navigator?title=reLaunch" open-type="reLaunch" 
hover-class="navigator-hover"> 











<button type="default">reLaunch: Hi a 47 FF¥</button> 
</navigator> 
<navigator delta="1" open-type="navigateBack"> 
<button type="default">navigateBack: 返 回 页 面 </button> 
</navigator> 
</view> 


http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
-navigator-hover button{ 

background-color: #DEDEDE; 
} 


navigator 


navigate: 新 窗口 打开 


redirect: 在 当前 页 打开 


switchTab: 切 换 tab 


reLaunch: 重 启 打 开 


navigateBack: 返 回 页 面 
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navigator 


navigate: 新 窗口 打开 


redirect: 在 当前 页 打开 


switchTab: 切 换 tab 
reLaunch: 重 启 打 开 


navigateBack: 返 回 页 面 





图 14-2 















































在 上 面 的 代码 中 ， 最 后 一 个 导航 组 件 navigator， 虽 然 没 有 指定 hover-class 属 性 ， 但 因为 在 wxss 中 重 写 了 “.navigator-hover” 样 式 类 ， 所 以 其 仍 具 有 和 其 他 导航 组 件 一 样 的 单 击 状态 ， 如 图 14-2 所 












































而 





5 种 open-type 有 效 值 ， 默 认 都 有 url 属 性 ， 仅 当 open-type 为 navigateBack 时 例外 。 当 open-type 为 navigateBack 时 ，url 无 效 ， 另 有 delta 属 性 表示 反 退 的 级 别 ， 默 认为 1。 














一 般 来 说 url 都 可 以 有 页 面 参数 ， 仅 当 open-type 为 switchTab 时 ，url 属 性 不 带 附带 页 面 参数 。 






































如 果 一 个 页 面 被 声明 为 tab 页 ， 即 在 app.json 文 件 的 tabBar 配 置 中 使 用 了 这 个 页 面 的 地 址 ， 那 么 这 个 页 面 就 不 能 再 用 wx.navigateTo 或 wx.redirect 进 行 跳 转 ， 而 是 只 能 用 wx.switchTab 进 行 切 换 (并 且 
切换 时 不 能 附带 页 面 参数 ) ， 否 则 会 无 法 实现 跳 转 。 





























2. 导 航 接 





























小 程序 有 5 个 导航 接口 ， 使 用 导航 接口 可 以 在 逻辑 层 实现 页 面 的 跳 转 。 














(1) wx.navigateTo (OBJECT) 








该 接口 会 在 跳 转 到 新 页 面 时 保留 当前 页 面 。 跳 转 之 后 ， 使 用 wx.navigateBack 可 以 返回 原 页 面 。 



































”相连 , 不 








每 个 小 程序 接口 接收 的 参数 都 是 Object 对 象 。 在 这 个 接口 参数 对 象 中 ，url 是 要 跳 转 到 的 非 tab 页 面 的 路 径 ， 路 径 之 后 可 以 带 参数 。 参 数 与 路 径 之 间 使 用 “? ” 分隔， 参数 键 与 参数 值 
同 的 参数 用 “8&” 分隔 , 如 “path? key=value&key2=value2" , 


























每 个 (异步) 小 程序 接口 都 可 以 在 参数 对 象 中 指定 三 个 回调 函数 ， 具 体 如 下 。 





< success: 接口 调用 成 功 的 回调 函数 。 


“ fail: 接口 调用 失败 的 回调 函数 。 


‘complete: 接口 调用 结束 的 回调 函数 ， 无 论调 用 成 功 、 失 败 都 会 执行 。 


代码 示例 如 下 : 








wx.navigateTo ({ 
url: 'newpage?id=1', 
success:res => {}, 
fail:err => {}, 
complete: => {} 


(2) wx.redirectTo (OBJECT) 





该 接口 会 关闭 当前 页 面 ， 跳 转 到 新 页 面 。url 等 参数 与 wx.navigateTo 接 口 相同 。 




















代码 示例 如 下 : 


wx.redirectTo ({ 
url: 'otherpage?id=1', 
success:res => {}, 
fail:err => {}, 
complete: => {} 





(3) wx.switchTab (OBJECT) 











该 接口 会 跳 转 到 tabBar 页 面 ， 并 关闭 其 他 所 有 非 tabBar 的 页 面 。 相 当 于 是 reLaunch 了 某 个 tab 页 面 。 























url| 参 数 必须 是 tab 页 面 的 路 径 ， 是 在 app.json 的 tabBar 配 置 字 段 中 定义 的 页 面 地 址 ， 路 径 之 后 不 能 带 参数 。 

















代码 示例 如 下 : 





{ 
"tabBar": { 
Masts. ff 
"pagePath": "index", 
"text": "首页 " 
}http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/17282/O0EBPS/Text/...] 
} 
} 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
wx. switchTab ({ = 
url: '/index', 
success:res => {}, 
fail:err => {}, 
complete: => {} 





(4) wx.navigateBack (OBJECT) 





该 接口 会 关闭 当前 页 面 ， 返 回 上 一 级 页 面 或 多 级 页 面 。 








对 于 该 接口 ，url 等 参数 无 效 。delta 参 数 指定 要 返回 的 页 深 ， 默 认为 1， 即 返回 上 一 次 打开 的 页 面 。 











E 











代码 示例 如 下 : 





wx.navigateBack ({ 
delta: 1 
}) 





(5) wx.reLaunch (OBJECT) 


该 接口 会 关闭 所 有 页 面 ， 打 开 新 页 面 。 














Url 参数 等 同 于 wx.navigateTo 接 口 的 url 参 数 ， 但 也 可 以 是 tab 页 面 的 路 径 。 
































一 旦 代码 调用 了 这 个 页 面 ， 微 信 就 能 确认 其 他 页 面 不 再 被 依赖 ， 就 能 将 它们 销毁 、 回 收 ， 从 而 提升 小 程序 的 使 用 体验 。 依 此 来 看 ， 这 是 一 个 优化 API。 如 果 小 程序 项 目 中 有 一 个 “首页 ”按钮 ， 当 要 单 
击 “ 首 页 ”按钮 时 ， 不 妨 使 用 该 接口 。 




















代码 示例 如 下 : 





wx.reLaunch ({ 
url: 'homepage', 
success:res => {}, 
fail:err => {}, 


complete: => {} 
}) E 
14.2 audio 
1.audio 组 件 


























audio 是 音频 组 件 ， 用 于 播放 一 个 基于 HTTP 的 音频 资源 。 下 面 的 代码 展示 的 是 一 个 基于 audio 组 件 实现 的 带 有 audio 的 默认 播放 控件 ， 并 且 可 扩展 出 拖 动 播放 、 播 放 / 暂 停 、 从 头 播放 功能 的 播放 器 。 其 
运行 效果 如 图 14-3 所 示 。 















































在 视图 层 代 码 中 ，audio 即 为 音频 标签 ，poster 属 性 代表 默认 控件 上 的 音频 封面 的 图 片 资源 地 址 ， 若 未 启用 controls， 则 不 必 设 置 poster。name 代 表 默 认 控件 上 的 音频 名 字 ，author 代 表 默 认 控件 上 的 
作者 名 字 ，controls 代 表 是 否 显示 默认 控件 。sr< 是 将 要 播放 音频 的 资源 地 址 ， 是 必须 要 有 的 属性 。loop 表 示 是 否 循环 播放 。 





























id 是 audio 组 件 的 唯一 标识 符 ， 如 果 在 逻辑 层 代码 中 使 用 接口 wx.createAudioContext 创 建 音频 资源 的 上 下 文 对 象 ， 则 必须 设置 这 个 属性 。 























timeupdate 事 件 ， 在 播放 进度 发 生 改 变 时 触发 ， 其 detail={currentTime，duration}， 将 该 事件 绑 定 到 onTimeUpdate 函 数 。play 事 件 在 开始 /继续 播放 时 触发 ， 将 该 事件 绑 定 到 onPlay 函 数 。pause 











有 件 ， 当 播放 暂停 时 触发 。ended 事 件 在 音频 播放 到 末尾 时 触发 ， 同 时 绑 定 pause、ended 事 件 到 onStop 函 数 。 
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在 逻辑 层 代码 中 ， 使 用 页 面 数据 变量 playing 标 识 当前 音频 是 否 处 于 播放 状态 ， 并 在 onPlay、onstop 函 数 中 维护 该 变量 的 状态 变化 。 在 视 | 
播放 /暂停 按钮 的 src 属 性 ， 代 码 如 下 : 








层 代码 中 ， 会 根据 变量 playing 使 用 JS 的 三 目 运算 符 动态 泻 染 














src="{{!playing ? 'play' : 'pause'}}.png" 











在 页 面 周期 函数 onReady 中 ， 调 用 wx.createAudioContext 接 口 创建 了 一 个 音频 上 下 文 对 象 audioCtx， 该 对 象 存储 在 this 对 象 上 ， 即 当前 的 Page 对 象 。 























<view class="spacing"> 
<audio style="width:100%" poster="{ {audio.poster}}" 
name="{ {audio.name}}" author="{ {audio.author}}" src="{{audio.src}}" 
id="myAudio" controls loop bindtimeupdate="onTimeUpdate" 
bindplay="onPlay" bindpause="onStop" bindended="onStop"></audio> 
</view> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell__hd vcenter"> 








<image bindtap="play" src="{{!playing ? 'play' : 'pause'}}.png" 
style="width: 28px; height : 28px; padding-right : 5px; "></image> 
</view> 


<view class="weui-cell__bd"> 
<slider min="0" max="{{audio.duration}}" value="{ {audio.current}}" 
bindchange="seek" /> 
</view> 
<view class="weui-cell__ ft vcenter"> 
<image bindtap="restart" src="replay.png" 
style="width: 28px; height : 28px; "></image> 
</view> 
</view> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
Page ({ 
data: { 
playing: false, 
audio: { 
current:0, 
duration:0, 
poster: 
"http: //y.gtimg.cn/music/photo_new/T002R300x300M000003rskF44GyaSk. jpg?max_age=2592000', 
name: ' 此 时 此 刻 '， ~ 
author: ' 许 独 '， 
src: 
"http: //ws.stream.qqmusic.qq.com/M500001VfvsJ21xFgb.mp3?guid=ffffffff82def 4af 4b12b3cd9337d5e7 suin=34 6897220 évkey=6292F51E1E384E0 6DCBDC9AB7C4 9FD713D632D31 3AC4858BACB8DDD2 9067D3C 
} 


ty 
onReady (e) { 
this.audioCtx = wx.createAudioContext ('myAudio') 
ty 
onPlay() { 
this.setData ({ 
"playing": true 
t) 
ty 
onStop() { 
this.setData ({ 
"playing": false 
3) 
ty 
seek (e) { 
var cur = Math.round(e.detail.value) 
// console.log (cur) 
this.audioCtx.seek (cur) 
hy 
onTimeUpdate (e) { 
this.setData ({ 
“audio.current": Math.round(e.detail.currentTime) , 
"audio.duration": Math.round(e.detail.duration) 
t) 
ty 
Play() { 
var playing = this.data.playing 
if (playing) { 
this.audioCtx.pause () 
jelse{ 
this.audioCtx.play () 
} 
hy 
restart () { 
this.audioCtx.play () 
this.audioCtx.seek (0) 





01:27 

















2.AudioContext 对 象 



































AudioContext 对 象 用 于 和 audio 组 件 进行 绑 定 ， 通 过 它 可 以 在 逻辑 层 操作 视图 层 的 audio 组 件 。 可 以 用 wx.createAudioContext (audiold) 接口 创建 ， 并 返回 audio 的 上 下 文 对 象 AudioContext。 





























AudioContext 具 有 以 下 属性 。 
“setSrc: 设置 音频 的 新 地 址 ， 基 于 该 方法 可 以 实现 音乐 专辑 的 连续 播放 。 
- play: 播放 。 
“ pause: 暂停 。 


“ seek: 跳 转 到 指定 位 置 ， 单 位 为 秒 。 


14.3 image 

















image 是 图 像 组 件 ， 显 示 本 地 或 网 络 上 的 一 张 图片 。src 属 性 代表 图 片 地 址 ，mode 属 性 指示 图 片 内 容 裁剪 、 缩 放 的 模式 ，image 相 当 于 是 一 块 画布 ， 当 image 本 身 的 大 小 与 图 像 内 容 的 大 小 不 一 致 时 ， 
如 何 将 图 像 内 容 绘制 到 画布 上 ? 保留 哪些 舍弃 哪些 呢 ? 事实 上 ， 保 留 与 舍弃 的 策略 就 是 mode。mode 共 有 13 种 ， 但 常用 的 只 有 以 下 3 种 。 












































“ scaleToFill: 不 保持 纵横 比 缩放 图 片 ， 使 图 片 的 宽 高 完全 拉 伸 至 填 满 Image 区 域 。 这 种 模式 适用 于 以 单 色 小 图 片 作为 背景 填充 图 的 场景 。 












































“ aspectFit; 保持 纵横 比 缩放 图 片 ， 使 图 片 的 长 边 能 够 完全 显示 出 来 ， 可 以 完整 地 显示 图 片 。 这 种 模式 适用 于 在 文章 中 插图 的 场景 。 



































.aspectFil: 保持 纵横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 能 够 完全 显示 出 来 。 也 就 是 说 ， 图 片 通常 只 在 水 平 或 各 直 方向 是 完整 的 ， 另 一 个 方向 将 会 发 生 截 取 。 这 种 模式 一 般 适 用 于 页 首 的 广告 图 。 






































另外 10 种 不 常用 的 mode 分 别 如 下 。 





“ widthFix: 宽度 不 变 ， 高 度 自动 变化 ， 保 持原 图 宽 高 比 不 变 。 











‘top: 不 缩放 图 片 ， 只 显示 图 片 的 顶部 区 域 。 





- bottom: 不 缩放 图 片 ， 只 显示 图 片 的 底部 区 域 。 











center: 不 缩放 图 片 ， 只 显示 图 片 的 中 间 区 域 。 





left: 不 缩放 图 片 ， 只 显示 图 片 的 左边 区 域 。 

















“fight: 不 缩放 图 片 ， 只 显示 图 片 的 右边 区 域 。 





“top left: 不 缩放 图 片 ， 只 显示 图 片 的 左上 边区 域 (使 用 时 中 间 有 空格 ) 。 











“top fight: 不 缩放 图 片 ， 只 显示 图 片 的 右上 边区 域 。 














“ bottom left: 不 缩放 图 片 ， 只 显示 图 片 的 左下 边区 域 。 


“ bottom right: 不 缩放 图 片 ， 只 显示 图 片 的 右 下 边区 域 。 











图 14-4 所 示 的 是 13 种 模式 的 测试 程序 。 下 面 的 代码 是 其 逻辑 层 代码 。 使 用 mage 组 件 需要 指定 它 的 大 小 ， 宽 与 高 至 少 
aspectFit， 如 图 14-4 中 的 显示 效果 所 示 。 
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最 常用 的 情况 是 这 样 的 ， 指 定 image 的 宽度 为 100%， 设 置 mode 为 








<view class="weui-cells title"> 网 络 图 片 </view> 
<view class="weui-cells weui-cells after-title"> 
<view class="weui-cell"> 
<view class="weui-cell bd" style="line-height :0"> 
<image style="width: 100%; height: 300rpx" mode="{ {mode} }" 
src="https://mp.weixin.qq.com/debug/wxadoc/dev/image/cat/0.jpg?t= 2017727" /> 
</view> 
</view> 
</view> 
<view class="weui-cells_title">mode</view> 
<view class="weui-cells weui-cells_after-title"> 
<radio-group data-name="mode" bindchange="onRadioChange"> 
<label class="weui-cell weui-check_ label" 


wx: for="{{['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix','top', 'bottom', 'left','right','center','top left','top right', 'bottom left', 'bottom right']}}" 


wx: key="*this"> 

<view class="weui-cell__hd"> 
<radio value="{{item}}" checked="{ {item == mode} }"/> 

</view> 
<view class="weui-cell bd">{{item}}</view> 

</label> = 

</radio-group> 
</view> 





image 


网 络 图 片 





mode 


scale ToFill 


© aspectFit 


ER 


asSpec>«irill 


widthFix 


top 


bottom 
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144 video 























video 组 件 用 于 播放 视频 。 和 audio 一 样 ，video 也 有 controls 属 性 ， 开 启 该 属性 ， 则 显示 默认 播放 控件 (包括 播放 /暂停 按钮 、 播 放 进度 、 时 间 等 ) 。 在 大 多 数 业 务 场景 下 ， 默 认 的 播放 控件 就 已 经 足以 
满足 需求 了 。 除 了 使 用 默认 的 控件 之 外 ， 也 可 以 通过 监听 video 组 件 的 事件 ， 外 加 通过 接口 wx.createVideoContext 获 取 的 视频 上 下 文 对 象 ， 实 现 自 定义 的 UI 控件 。 





















































video 主 要 具有 如 下 属性 。 

“ stc: 要 播放 视频 的 资源 地 址 ， 一 般 为 网 络 地 址 。 

“ duration: 指定 的 视频 时 长 ， 从 开关 向 后 计算 ,相当 于 视频 剪辑 ， 单 位 是 s (媒体 组 件 涉及 的 时 间 ， 其 单位 都 是 s) 。 
“controls; 是 否 显示 默认 播放 控件 。 


+ danmu-list: 弹 幕 列 表 ， 是 一 个 Object 数 组 ，Object 的 结构 为 {text，color，time} ， 其 中 time 的 单位 为 s。 


- enable-danmu: 是 否 展 示 弹 幕 ， 和 danmu-btn 一 样 ， 是 初始 化 属性 ， 只 在 初始 化 时 有 效 ， 不 能 动态 变更 。 
- autoplay: 是 否 自动 播放 。 


‘loop: 是 否 循环 播放 。 














如 下 代码 展示 了 video 组 件 的 基础 使 用 方法 ， 其 运行 效果 如 





网 











14-5 所 示 。 








<view class="container"> 
<view class="page-body"> 
<view class="page-section tc"> 
<video id="myVideo" duration="120" 
src="http: //wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301£0201690402534804102ca905ce620b1241b726bc41dcf£44e00204012882540400&bizid=1023&hy=SH&filepar 
binderror="videoErrorCallback" danmu-list="{{danmuList}}" 
enable-danmu controls></video> 
<view class="weui-cells"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cell hd"> 
<view class="weui-label"> 弹 幕 内 容 </view> 
</view> 
<view class="weui-cell bd"> 
<input bindblur="bindInputBlur" class="weui-input"type="text" 
Placeholder=" 在 此 处 输入 弹 幕 内 容 " /> 
</view> 
</view> 
</view> 
<view class="btn-area"> 
<button bindtap="bindSendDanmu" class="page-body-button" type= 
"primary" formType="submit"> 发 送 弹 幕 </button> 
</view> 
</view> 
</view> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
let app = getApp() 
Page ({ 
onReady: function (res) { 
this.videoContext = wx.createVideoContext ('myVideo') 





ty 
inputValue: '', 
data: { 
sre: '', 
danmuList: 
Uf 
text: "第 1s 出 现 的 弹 幕 '， 
color: '#££0000', 


time: 1 


text: "第 3s 出 现 的 弹 幕 '， 
color: '#ff00ff', 
time: 3 

H 


hy 
bindInputBlur: function(e) { 
this.inputValue = e.detail.value 
ty 
bindSendDanmu: function () { 
this.videoContext .sendDanmu ({ 
text: this.inputValue, 
color: app.getRandomColor () 
3) 
hy 
videoErrorCallback: function(e) { 
console.1og(' 视 频 错 误 信息 :7") 
console.log (e.detail.errMsg) 











|] 00:03 @ 
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14.5 map 
































map 是 地 图 组 件 ， 给 出 中 心 点 的 经 纬 坐 标 ， 就 会 直接 显示 一 张 二 维 地 图 。 使 用 map 组 件 ， 可 以 实现 在 地 图 上 进行 标记 、 划 圈 、 划 线 等 功能 。 下 面 的 代码 展示 了 map 组 件 的 基础 使 用 方法 ， 其 运行 效果 如 
14-6 所 示 。 
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在 视图 层 代码 中 ， 会 使 用 到 map 组 件 的 如 下 属性 。 














- latitude: 代表 中 心 纬度 。 

“longitude; 代表 中 心经 度 。 

- markers: 标记 点 数组 ， 每 个 标记 点 是 一 个 Object 对 象 。 

“ circles: 在 地 图 上 显示 圆圈 所 使 用 的 数据 ， 是 一 个 数组 ， 数 组 元 素 是 circle 数 据 对 象 。 


- scale: 缩放 级 别 ， 取 值 范 围 为 5~18， 在 图 14-6 中 ， 拖 动 slider 组 件 ， 将 改变 map 的 缩放 级 别 。 
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图 14-6 
+ polyline: 用 两 个 以 上 的 坐标 点 ， 依 次 连 线形 成 线路 的 数据 。 
“ show-location: 显示 带 有 方向 的 当前 定位 点 。 


“ include-points: 缩放 视野 需要 包含 的 经 纬 坐标 点 数组 。 





<map style="width: 100%; height: 300px;" latitude="{ {latitude}}" 
longitude="{ {longitude}}" markers="{{markers}}" circles="{{circles}}" 
scale="{{scale}}" polyline="{ {polyline} }" 
show-location include-points="{ {markers}}" bindtap="onTap"> 
<cover-view> 
<cover-view class="weui-msg__title hcenter" 
style="background-color:rgba (0, 0,0, .3) ;color:white;padding:10rpx"> 广 州 海珠 万 里 画 行 </cover-view> 
</cover-view> 
<cover-view style="position:absolute;width:100%;bottom:0;display:flex;"> 
<cover-image style="width:30px;height:30px" data-location="1" 
bindtap="changeLocation" src="/image/green tri.png" /> 


<cover-image style="width: 30px; height :30px" data-location="2" 
bindtap="changeLocation" src="/image/green_tri.png" /> 
</cover-view> T 
</map> 
<view class="weui-cells weui-cells_after-title"> 
<view class="weui-cell weui-cell_input"> 
<view class="weui-cel1_hd"> 
<view> 缩 放 </view> 
</view> 
<view class="weui-cell__bd"> 
<slider value="{{scale}}" min="5" max="18" step="1" data-name="scale" bindchange="onSliderChange" show-value/> 
</view> 
</view> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
let app = getApp() 
Page (Object .assign ({ 
data: { 
latitude: 23.099994, 
longitude: 113.324520, 
markers: [{ 
iconPath: "/image/location.png", 
id: 0, 
latitude: 23.099994, 
longitude: 113.324520, 
width: 50, 
height: 50, 
anchor: { x: .5, y: 0.8 }, 
title: ' 创 意图 '， 
callout: { content:' 创 意图 地 标 建筑 '} 
ty { 
iconPath: "/image/location.png", 
id: 0, 
latitude: 23.112600, 
longitude: 113.324520, 
width: 50, 
height: 50, 
anchor: { x: .5, y: 0.8 } 
H, 
circles: [{ 
latitude: 23.099994, 
longitude: 113.324520, 
color: "#ff0000", 
fillColor: "#00000010", 
strokeWidth: 0, 
radius: 120 








ty { 
latitude: 23.112600, 
longitude: 113.324520, 
color: "#f££0000", 
fillColor: "#00000010", 
strokeWidth: 0, 
radius: 100 
Hl; 
polyline: [{ 
points: [{ 
latitude: 23.099994, 
longitude: 113.324520 
ty { 
latitude: 23.112600, 
longitude: 113.324520, 


color: "#f££0000", 
width: 3, 
dottedLine: true, 
arrowLine: true 
H 
ty 


onLoad() { 
this.setData ({ 
scale: 14 
D) 
Z 
onTap (e) { 


console.log (e) 
ty 
changeLocation(e) { 
var location = e.currentTarget.dataset.location 
let markers = this.data.markers 
if (location == 1) { 
this.setData ({ 
latitude: markers [0].latitude, 
longitude: markers[0].longitude 
3) 
} else { 
this.setData ({ 
latitude: markers [1].latitude, 
longitude: markers[1] .longitude 
t) 
} 
} 
}, app.page)) 
































在 上 述 代码 中 ， 使 用 markers 在 地 图 上 显示 了 两 个 绿色 的 地 图 标记 ， 这 两 个 标记 是 图 片 ，markers 定 义 了 显示 它们 的 坐标 。markers 元 素 主要 包含 如 下 属性 。 





























“ id: 标记 点 id，matkertap 事 件 回调 会 返回 此 id， 通 过 监听 matkertap 事 件 可 以 知道 用 户 单 击 了 哪个 标记 点 。 

- latitude: 纬度 ， 范 围 -90”~90”。 

‘longitude: 经 度 ， 范 围 -180”~180”。 

‘title: 标注 点 名 。 

' iconPath: 显示 的 图 标 路 径 。 

- rotate: 顺 时 针 旋 转 的 角度 ， 范 围 0~360”， 默 认为 0。 

- alpha: 标注 的 透明 度 。 

width: 标注 的 图 标 宽 度 ， 默 认为 图 片 的 实际 宽度 。 

height: 标注 的 图 标高 度 ， 默 认为 图 片 的 实际 高 度 。 

‘callout: 自 定 义 标 记 点 上 方 的 气泡 窗口 ， 对 象 结构 为 {content，color，fontSize ，borderRadius bgColor, padding, boxShadow, display}. 


label: 为 标记 点 旁边 增加 标签 ， 对 象 结构 为 {color，fontSize，content，x，y}。 














- anchor: 经 纬度 为 标注 图 标的 锚 点 ， 默 认为 底 边 中 点 ， 对 象 结构 为 {x，y}，x 表 示 横 向 (0-1) ，y 表 示 竖 向 (0-1) , {x2 .5，y: .5} 表 示 中 点 。 在 上 面 的 代码 中 ， 使 用 的 anchor 是 {x: .5，y: 0.8}， 是 底 
边 中 点 稍 上 一 点 的 位 置 。 

















在 上 述 代码 中 ， 使 用 circles、polyline 在 地 














上 绘制 了 两 个 圆 和 一 条 虚线 ， 如 图 14-6 所 示 。 
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circles 的 元 素 具有 如 下 属性 。 








- latitude: 纬度 ， 范 围 -90”~90”。 

‘longitude: 经 度 ， 范 围 -180”~180”。 

“ color: 描 边 的 颜色 ，8 位 十 六 进 制 表示 ， 后 两 位 表示 alpha 值 ， 如 #000000AA。 
' fillColor: 填充 颜色 ，8 位 十 六 进 制 表示 ， 后 两 位 表示 alpha 值 ， 如 #000000AA。 
- radius: 半径 ， 单 位 为 px。 

+ strokeWidth: 描 边 的 宽度 。 

- polyline 对 象 具有 如 下 属性 。 

‘points: 经 纬度 数组 ， 例 如 [flatitude: 0, longitude: 0}]。 

“ color: 线 的 颜色 ，8 位 十 六 进 制 表示 ， 后 两 位 表示 alpha 值 ， 如 #000000AA。 

- width: 线 的 宽度 。 

- dottedLine: 是 否 显示 为 虚线 。 

:attowLine: 是 否 带 箭头 。 

- borderColor: 线 的 边框 颜色 。 


+ borderWidth: 线 的 厚度 。 

















使 用 cover-view 组 件 (内 嵌 cover-image 组 件 ) 同样 可 以 在 地 图 上 显示 图 片 ， 也 可 以 实现 和 markers 一 样 的 视觉 效果 。 但 cover-view 并 不 能 随地 图 进行 缩放 ， 而 polyline、markers、circles 则 是 和 地 
一 起 缩放 的 ， 决 定 它们 的 不 是 {x，y) 坐 标 ， 而 是 {longitude，latitude}) 经 纬 坐标 。 
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14-6 中 ， 若 分 别 单 击 左下 角 的 两 个 三 角形 按钮 ， 则 会 在 虚线 两 端的 两 个 坐标 点 之 间 切 换 地 图 。 

















14.6 canvas 


























canvas 是 画布 组 件 ， 可 以 监听 touch 事 件 ， 可 以 实现 基本 的 二 维 几何 图 形 的 绘制 。 如 下 代码 展示 了 canvas 组 件 的 使 用 ， 其 运行 效果 如 





网 




















14-7 所 示 ， 可 以 在 画布 区 域 用 手指 划 动 涂鸦 ， 单 击 “ 清 空 ”按钮 

















<canvas style="background-color:#cfcfcf" 
canvas-id="canvas" class="canvas" bindtouchmove="onMove"></canvas> 
<view class="weui-btn-area"> 


<button bindtap="clear" class="weui-btn" type="primary"> 清 空 </button> 
</view> 
http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
Page ({ 
2 data: {}, 
track: [], 
dirty: false, 
onReady() { 
this.context = wx.createCanvasContext ('canvas') 
this.drawInternal = setInterval( => { 


if (!this.dirty) return ~ 

for (var i in this.track) { 
let touch = this.track[i] 
this.drawBall (touch.x, touch.y) 


wx.drawCanvas ({ 
canvasId: 'canvas', 
actions: this.context.getActions () 
H 
this.dirty = false 
}, 50) 
hy 
clear() { 
this.track.length = 0 
this.dirty = true 
ty 
onMove(e) { 
var touch = e.touches[0] 
this.track.push (touch) 
this.dirty = true 
ty 
drawBall(x, y) { 
let context = this.context 
context .beginPath (0) 
context.arc(x, y, 2, 0, Math.PI * 2) 
context .setFillStyle ('#eb6587') 
context.setStrokeStyle ('rgba(1,1,1,0)') 
context. fill() 
context. stroke () 
hy 
onUnload() { 
clearInterval (this.drawInternal) 
} 
}) 
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在 上 述 代码 的 逻辑 层 代码 中 ， 页 面 周期 函数 onReady 中 ， 使 























局 JS 函数 setlnterval 注 册 了 一 个 50ms 触 发 一 次 的 定时 器 。 在 定时 器 函数 中 ， 首 先 会 循环 读 取 坐 标 数组 track， 并 在 CanvasContext 对 象 





上 建立 绘制 路 径 ， 然 后 使 口 将 路 径 信息 绘制 








wx.drawCanvas 接 











在 上 述 代码 中 ，track 是 画布 的 数据 ， 把 这 个 数据 通过 socket 共 享 给 


到 画 


布 之 上 。 


多 个 用 户 ， 就 可 以 实现 在 线 教学 的 画板 功能 。 


第 四 篇 ”语言 提高 篇 
+ HASH JavaScript 语言 基础 


- B16% WXSS 样 式 基础 


“ 第 17 章 ”Go 语言 基础 


第 15 章 ”JavaScript 语 言 基础 





JavaScript (简称 JS) 最 早 是 由 Mozilla 公 司 的 Brendan Eich 发 明 的 ， 该 语言 非常 通用 ， 也 非常 简洁 和 灵活 ， 已 经 广泛 应 用 于 服务 端 开发 、Web 开 发 、App 开 发 等 各 个 领域 。JS 也 是 小 程序 开发 的 前 端 语 
言 ， 本 章 将 主要 介绍 该 语言 的 基础 语法 及 一 些 使 用 技巧 。 
































15.1 语法 基础 














针对 简短 JS 语法 的 测试 练习 ， 既 可 以 在 小 程序 页 面 的 onLoad 函 数 中 进行 ， 也 可 以 在 微 信 开 发 者 工具 的 Console 面 板 中 直接 测试 代码 ， 如 图 15-1 所 示 。 
































> [2，5，9].forEach((eLement，index，arr)=>{ 
console. log("a[" + index + "] = " + element); 
}) 


af[9] 
af[1] 
a[2] = 


2 
5 
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15.1.1 变量 




















变量 是 存储 数据 的 容器 。 要 声明 一 个 变量 ， 需 要 使 用 关键 字 var， 然 后 输入 你 想 要 的 任何 名 称 ， 比 如 





var myVariable; 





行 示 的 分 号 表示 语句 结束 ， 不 过 这 个 分 号 只 有 在 单行 内 需要 分 割 语 句 时 才 是 必需 的 ， 有 些 人 认为 在 每 个 语句 后 面 都 加 上 分 号 是 一 种 好 的 风格 ， 但 笔者 认为 ， 如 非 必要 ， 在 小 程序 开发 中 可 略 去 分 号 。 


在 小 程序 里 命名 变量 的 名 称 ， 第 一 个 字符 必须 是 一 个 ASCll 字 母 (大 小 写 均 可 ) ， 或 者 一 个 下 划 线 (O) 。 注 意 ， 第 一 个 字符 不 能 是 数字 ， 后 续 的 字符 必须 是 字母 、 数 字 或 下 划 线 ， 变 量 名 称 一 定 不 能 
JS 语言 的 关键 字 、 保 留 字 。 


























一 般 采 用 驼峰 式 命名 法 为 变量 命名 ， 变 量 名 或 函数 名 是 由 一 个 或 多 个 单词 连接 在 一 起 组 成 的 ， 其 中 第 一 个 单词 以 小 写字 母 开始 ， 后 面 所 有 单词 的 首 字母 都 采用 大 写字 母 ， 这 样 的 变量 名 看 上 去 就 像 驼峰 
一 样 此 起 彼 伏 ， 故 因此 而 得 名 ， 例 如 myVariable。 




















定义 一 个 变量 之 后 ， 可 以 为 它 赋予 一 个 值 : 





myVariable = 'Bob'; 





可 以 将 这 些 操作 写 在 一 行 : 


var myVariable = 'Bob'; 





可 以 通过 变量 名 称 读 取 变 量 : 





myVariable; 





在 为 变量 赋值 之 后 ， 也 可 以 改变 变量 的 值 : 











var myVariable = 'Bob'; 
myVariable = 'Steve'; 











注意 变量 包含 不 同 的 数据 类 型 ， 具 体 如 下 。 


+ String 








字符 串 ， 一 段 文 本 。 若 要 指示 变量 是 字符 串 ， 则 应 该 将 它们 用 引号 括 起 来 ， 例 如 : 

















var myVariable = 'Bob'; 





+ Number 


数字 ， 一 个 数字 。 不 用 引号 括 起 来 ， 例 如 : 





var myVariable = 10; 





* Boolean 


布尔 型 ， 一 个 True/False (A/R) 值 。true/false 是 JS 里 的 特殊 关键 字 ， 不 需要 用 引号 括 起 来 ， 例 如 : 





var myVariable = true; 





+ Array 





数组 ， 一 种 允许 在 一 个 引用 里 存储 多 个 值 的 结构 ， 例 如: 





var myVariable = [1,'Bob','Steve',10]; 




















调用 数组 的 元 素 只 需要 这 样 使 用 ， 使 用 方 括号 加 一 个 下 标 数 字 : 

















myVariable[0], myVariable[1] 





.Object 


对 象 ， 基 本 上 JS 里 的 任何 东西 都 是 对 象 ， 而 且 都 可 以 被 存储 在 变量 里 ， 例 如 : 





var myVariable = {loading:true}; 

















在 编程 时 要 做 任何 有 趣 的 事 都 必须 用 到 变量 。 如 果 变量 的 值 没 有 发 生 改变 ， 那 么 将 无 法 动态 地 做 任何 事情 。 
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15.1.2 注释 











在 JS 代码 中 添加 注释 ， 有 两 种 形式 ， 第 一 种 形式 如 下 所 示 ， 其 适用 于 多 行 注释 ， 一 般 放 在 函数 上 面 或 源码 文件 的 首部 : 














/* 


Everything in between is a comment. 
tA 





第 二 种 是 单行 注释 。 如 果 注 释 只 有 一 行 ， 那 么 可 将 它们 更 简单 地 放 在 两 个 斜 杠 之 后 ， 就 像 这 样 : 





// This is a comment 





单行 注释 既 可 以 放 在 JS 语句 的 上 面 ， 又 可 以 放 在 JS 语句 的 后 面 。 


1513 wet 


运算 符 是 一 个 根据 两 个 值 (或 变量 ) 做 出 结果 的 代数 符号 。 下 面 将 列举 一 些 最 简单 的 运算 符 ， 对 于 后 面 的 示例 ， 可 以 在 浏览 器 控制 台 里 尝试 操作 一 下 。 


“ 加 /连接 : 十 

















于 两 个 数字 的 相 加 ， 或 者 连接 两 个 字符 串 ， 例 如 : 








6+ 9; 
"Hello " + “world!"; 





i RR PD -、*、/ 


这 些 运算 符 操作 将 与 它们 在 基础 数学 中 所 做 的 操作 一 样 ， 例 如 : 





3 
2; // JS 中 的 乘 是 一 个 "*" 号 7 
py 


i 





“ 赋值 运算 符 : = 


读者 之 前 已 经 见 过 这 个 符号 了 ， 它 会 将 一 个 值 赋 给 一 个 变量 。 





var myVariable = 'Bob'; 














== 将 会 测试 两 个 值 是 否 相等 ， 而 且 会 返回 一 个 true/false (布尔 型 ) 值 。== = 不 仅 要 求 值 相等 ， 还 要 求 变量 的 类 型 相同 。 例 如 : 





var myVariable = 3; 
myVariable === 3;// true 
myVariable == '3';// true 





“ 非 ， 不 等 、 不 全 等 : ! 、! =、! == 





非 运 算 符 “! ”经 常 与 相等 运算 符 一 起 使 用 。 非 运算 符 在 JS 中 表示 逻辑 非 ， 它 也 返回 一 个 布尔 值 。 在 下 面 的 代码 中 ， 变 量 myVariable 的 值 是 true， 变 量 myVariable2 的 值 是 false: 








var myVariable = 3; 
var myVariable2 = !myVariable === 3;// false 





不 全 等 运算 符 “! ==” 与 全 等 运算 符 “===” 类 似 ， 在 比较 变量 值 的 基础 上 添加 了 对 变量 类 型 的 限制 。 如 下 代码 所 示 ，myVariable2 的 值 为 true: 





var myVariable = 3; 
var myVariable2 = myVariable !== '3';// true 





Oze 如 果 混 合 几 种 数据 类 型 可 能 会 导致 奇怪 的 结果 ， 比 如 输入 "35"+25， 第 二 个 数字 会 转换 成 字符 串 ， 最 终 会 连接 两 个 字符 串 而 不 是 数字 相 加 。 但 如 果 输 入 35+25， 则 会 得 到 正确 的 结果 。 


15.14 语句 




















语句 是 用 于 测试 一 个 表达 式 是 否 返 回 true， 然 后 根据 结果 运行 不 同 代 码 的 结构 。 最 常用 的 语句 形式 是 ifhttp://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ ebook/uncompressed/17282/OEBPS/Text/...else， 下 面 是 一 个 例子 : 
































var iceCream = 'chocolate'; 
if (iceCream === 'chocolate') { 

this.alert('Yay, I love chocolate ice cream!'); 
} else { 


this.alert ('Awwww, but chocolate is my favoritehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...'); 
} 

















if (http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...) 里 面 的 表达 式 就 是 测试 一 一 这 里 使 用 了 运算 符 (15.1.3 节 所 提 到 | 
AY) 来 比较 变量 iceCream 与 字符 串 chocolate 是 否 相等 。 如 果 返 回 true， 则 运行 前 面 一 块 的 代码 ; 如 果 返 回 false， 则 跳 过 第 一 段 ， 直 接 运 行 else 之 后 的 代码 。 












































小 程序 中 是 没有 alert 方 法 的 。alert 方 法 定义 在 window 对 象 上 ， 小 程序 没有 window 对 象 ， 在 Web 中 定义 在 window 对 象 上 的 方法 都 不 能 




















如 果 使 用 了 sim,js 类 库 的 app.page， 则 可 以 使 用 this.alert 代 蔡 alert， 代 码 如 下 所 示 : 

















let app = getapp () 


Page (Object.assign(app.page, { 
data: { 

outOfBounds: true, 
inertia:true, 
friction:2, 
damping:20, 
direction: "all", 
target: {x:30,y:30} 


tr 
onLoad () { 
this.alert (123) 
} 
})) 





运行 效果 如 图 15-2 所 示 。 











JN 
123 
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针对 JS 代码 的 练习 ， 可 以 在 小 程序 页 面 的 onLoad 函 数 内 进行 。 
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另 一 个 测试 代码 的 方法 是 console.log， 它 会 将 信息 打印 到 控制 台 窗 此 更 加 灵活 。 

















15.1.5 ”函数 
































函数 是 一 种 封装 你 想 要 重复 使 用 的 功能 的 方法 ， 在 任何 时 候 ， 若 想 使 用 其 中 的 功能 都 可 以 通过 函数 名 称 来 调用 ， 这 样 就 不 用 重复 编写 整 段 代 码 了 。 上 面 已 经 用 过 一 些 这 方面 的 函数 了 ， 比 如 : 









































this.alert ("hello!'); 


























如 果 看 到 一 些 字符 串 长 得 像 变量 名 ， 但 是 有 括号 () 在 后 面 ， 那 么 其 可 能 就 是 一 个 函数 。 函 数 通常 包 括 一 些 必要 的 参数 ， 它 们 在 括号 内 部 ， 如 果 有 一 个 以 上 的 参数 ， 则 需要 使 用 逗号 分 开 。 














比如 ，this.alert 函 数 会 在 页 面 窗口 内 弹出 一 个 警告 框 ， 但 是 需要 为 参数 传 入 一 个 字符 串 ， 以 告诉 函数 应 该 在 警告 框 里 写 什 么 。 









































户 可 以 定义 自己 的 函数 


， 下 一 个 例子 ， 会 编写 一 个 简单 的 需要 两 个 参数 来 做 乘法 运算 的 函数 : 











尝试 在 onLoad 函 数 中 使 


multiply (numl,num2) { 


var result = numl * num2; 


return result; 














this.multiply 运 行 这 个 函数 ， 然 后 尝试 几 次 不 同 的 参数 ， 比 如 : 





this.multiply (4,7); 
this.multiply (20,20); 
this.multiply(0.5,3); 





Oza teturn 语 名 用 于 告诉 小 程序 ， 返 回 tesult 变 量 以 便 后 续 使 用 。 这 是 很 有 必要 的 ， 因 为 函数 内 定义 的 变量 只 能 在 函数 内 使 用 ， 这 称 为 作用 域 ， 简 单 的 理解 就 是 其 是 变量 和 函数 发 挥 作用 的 代码 范 


this 在 此 处 指 代 当前 的 页 面 对 象 ，this.multiply 是 调用 当前 页 面 作用 域内 定义 的 multiply 方 法 。 在 小 程序 开发 中 ， 在 Page 内 声明 的 对 象 一 般 只 有 两 种 : 页 


15.1.6 事件 


在 


1. 什 么 是 事件 


























MERA, TEARS 














AB wil. KI 








件 非常 





。 如 同 Web 开 发 一 样 ， 小 程序 中 的 事件 同样 









































件 是 视图 层 到 逻辑 层 的 通信 方式 ， 可 以 将 











touches 等 。 








Bibs 





























户 的 行为 反馈 到 逻辑 层 进行 处 理 ， 将 事件 绑 定 在 组 件 上 ， 当 事件 触发 时 ， 就 会 执行 逻辑 层 中 对 应 的 








在 之 前 章节 的 开发 示例 中 ， 以 bind 开 头 的 组 件 属性 绑 定 的 均 是 事件 函数 ， 由 参数 event 传 递 过 去 。 








事件 又 分 为 冒 泡 




















件 和 非 冒 泡 事件 ， 具 体 如 下 。 








“ 冒 泡 事 件 : 当 一 个 组 件 上 的 事件 被 触发 后 ， 该 事件 会 向 父 节点 传递 。 


“ 非 冒 泡 事件 : 当 一 个 组 件 上 的 事件 被 触发 后 ， 该 事件 不 会 向 父 节 点 传递 。 


wy 


2. 如 何 使 


前 面 3.3.1 节 介绍 的 绑 定 计算 按钮 所 利 上 



































事件 











的 事件 便 是 冒 泡 事件 。 

















首先 ， 在 组 件 中 绑 定 一 个 事件 处 理 函 数 。 如 bindtap， 当 

















<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 


件 ， 在 3.3.1 节 中 已 讲 过 。 





初始 数据 对 象 data 和 函数 。 


























户 点 击 该 组 件 的 时 候 ， 会 在 该 页 面 对 应 的 Page 中 找到 相应 的 事件 处 理 函 数 : 


件 处 理 函 数 。 可 以 携带 额外 信息 ， 比 如 id、dataset、 








其 次 ， 在 相应 的 Page 定 义 中 写 上 相应 的 事件 处 理 函 数 ， 参 数 是 event， 代 码 如 下 : 





Page ({ 
tapName: function(event) { 
console. log (event) 


}) 


} 








console.log 打 印 出 来 的 信息 大 致 如 下 : 





{ 


"type": "tap", 
"timeStamp": 895, 
"target": { 


] 


"id": "tapTest", 
"dataset": { 

"hi":"WeChat" 
} 


"currentTarget": { 


"id": "tapTest", 
"dataset": { 
"hi": "WeChat" 


"touches": [{ 


"identifier":0, 
"pageX":53, 
"pageY" :14， 
"clientXn :53， 
"clientY" :14 


’ 
"changedTouches": [{ 


"identifier":0, 
"pageX":53, 
"pagey":14, 
"clientX":53, 
"clienty":14 





event 事 件 的 detail 与 currentTarget.dataset 信 息 在 开发 中 会 经 常用 


3. 如 何 进行 事件 绑 定 

















件 绑 定 的 写法 与 组 件 的 




















属性 相同 ， 以 key=value 的 形式 书写 ， 具 体 说 明 如 下 。 








“key 以 bind 或 catch 开 头 ， 后 接 事件 的 类 型 ， 如 bindtap、catchtouchstart。 


:value 是 一 个 字符 串 ， 需 要 在 对 应 的 Page 中 定义 同名 的 函数 ， 不 然 当 事件 触发 的 时 候 会 报错 。 


到 。target 是 触发 事件 的 源 组 件 。currentTarget 是 寻 





有 件 绑 定 的 当前 组 件 。 





























bind 事 件 绑 定 不 会 阻止 冒 泡 事件 向 上 冒 泡 ，catch 事 件 绑 定 可 以 阻止 冒 泡 事件 向 上 冒 泡 。 





























在 下 面 的 示例 中 ， 点 击 inner view 会 先后 触发 handleTap3 和 handleTap2 (因为 tap 事 件 会 冒 泡 到 middle view， 而 middle view 阻 止 了 tap 事 件 冒 泡 ， 使 其 不 再 向 父 节点 传递 ) ， 点 击 middle view 会 触 














发 handleTap2， 点 击 outter view 会 触发 handleTap1。 





<view id="outter" bindtap="handleTap1"> 
outer view 
<view id="middle" catchtap="handleTap2"> 
middle view 
<view id="inner" bindtap="handleTap3"> 
inner view 
</view> 
</view> 
</view> 























性 。 





当 组 件 触发 事件 时 ， 逻 辑 层 绑 定 该 事件 的 处 理 函 数 会 收 到 一 个 事件 对 象 。 基 础 事件 (BaseEvent) 对 象 包含 如 下 属 

















- type: 事件 类 型 。 
“ timeStamp: 事件 生成 时 的 时 间 堆 。 
‘target: 触发 事件 的 组 件 的 一 些 属性 值 集合 。 


“ currentTarget: 当前 组 件 的 一 些 属性 值 集合 。 
































对 于 change 类 的 CustomEvent 事 件 对 象 ， 又 多 了 一 个 detail 属 性 ， 它 十 分 有 用 ， 是 逻辑 层 获取 视图 层 信 息 的 主要 渠道 之 一 。 











TouchEvent 触 摸 事件 对 象 具有 如 下 属性 。 








“ touches: 当前 停留 在 屏幕 中 的 触摸 点 信息 的 数组 。 


+ changedTouches: 当前 变化 的 触摸 点 信息 的 数组 。 














很 少 会 用 到 触摸 事件 的 额外 属性 。 


























4. 如 何 自 定义 及 使 用 数据 属性 dataset 









































在 组 件 中 可 以 自 定义 数据 ， 这 些 数据 将 会 通过 事件 传递 给 逻辑 层 。 书 写 方式 是 以 data- 开 头 ， 多 个 单词 之 间 由 连 字 符 “-” 进行 连接 ， 不 能 有 大 写 (大 写 会 自动 转换 成 小 写 ) ， 如 data-element-type， 
最 终 在 event.currentTarget.dataset 中 会 将 连 字 符 转 成 驼峰 式 elementType。 例 如 ， 视 图 层 的 代码 为 : 

















<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"></view> 





























逻辑 层 的 代码 如 下 所 示 ， 先 以 e.currentTarget.dataset 获 取 到 自 定 义 数 据 的 集合 对 象 ， 再 以 点 访问 符 获 取 自 定义 数据 的 值 ; 





Page ({ 
bindViewTap: function (e) { 
e.currentTarget.dataset.alphaBeta === 1 // - 会 转换 为 驼峰 写法 
e.currentTarget.dataset.alphabeta === 2 // 大 写 会 转换 为 小 写 


} 
B 





5. 使 用 事件 的 detail 信 息 



























































自 定义 事件 所 携带 的 数据 (如 表单 组 件 的 提交 事件 ) 会 携带 用 户 的 输入 ， 媒 体 的 错误 事件 会 携带 错误 的 信息 。 点 击 事件 的 detail 对 象 带 有 的 x 和 y 属 性 ， 代 表单 击 点 距离 文档 左上 角 的 x 距离 和 y 距 离 。 


change 事 件 会 带 有 变化 值 value。 








15.2 ”实用 的 简写 技巧 
































本 节 所 谈 及 的 技巧 ， 在 前 面 的 章节 中 大 多 数 已 有 使 用 ， 掌 握 这 些 技巧 可 以 让 你 看 起 来 更 像 一 个 编程 高 手 。 但 事实 上 ， 真 正 的 高 手 在 于 思想 ， 并 不 在 于 技巧 ， 在 使 用 这 些 技巧 时 ， 须 以 易 写 、 易 读 、 易 维 
护 为 前 提 。 

















15.2.1 三 元 操作 符 

















“? : ”是 三 元 操作 符 ， 因 参与 运算 的 对 象 是 三 个 ， 所 以 被 称 为 三 元 操作 符 。 当 使 用 if...else 语 句 时 ， 可 以 使 用 更 简短 的 三 元 操作 符 来 代 蔡 ， 如 下 代码 所 示 : 





























let x = 20; 
let answer; 
if (x > 10) { 





answer = 'is greater'; 
} else { 
answer = 'is lesser'; 
} 
可 将 代码 简写 为 : 
let answer = x > 10 ? 'is greater' : 'is lesser' 





15.2.2 ”逻辑 并 操作 符 

















连续 的 两 个 竖 杠 是 逻辑 并 操作 符 。 当 对 一 个 变量 赋值 时 ， 若 想 确定 原始 值 是 不 是 null、undefined 或 空 值 ， 可 采用 如 下 代码 : 


if (varl !== null || varl !== undefined || varl !== '') { 
var2 = varl; 
felse{ 


var2 = 'new' 


} 





使 用 逻辑 并 操作 符 的 简写 方法 为 : 





var2 = varl || 'new' 





15.2.3 ”单行 声明 变量 


对 于 多 行 声明 变量 的 代码 ， 例 如 : 








let x; 

let y; 

let z = 3; 
可 以 简写 为 : 





let x, y, 2=3; 





如 果 声 明 语句 过 长 ， 那 么 此 法 须 慎 用 。 


15.24 在 if 语句 中 使 用 布尔 值 


下 面 的 代码 : 





if (varl=== true) 





可 简写 为 : 





if (varl) 





但 只 有 var1 是 真 值 时 ， 二 者 语句 才 相等 。 


如 果 判 断 值 不 是 真 值 ， 则 可 以 采用 如 下 代码 : 





let a; 
if (a != true ) { 

//http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
} 





简写 后 则 为 : 





let a; 
i bay A, 

//http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 
} 





15.2.5 ”for 循环 


下 面 的 代码 : 





for (let i = 0; i < allImgs.length; i++) 





可 简写 为 : 





for (let index in allImgs) 








也 可 以 使 用 Array.forEach : 

[2, 5, 9].forEach((element, index, arr)=>{ 
console.log("a[" + index + "] = " + element); 

t) 

// 输出 : 

// al] = 2 

// all] = 5 

// al2] = 9 





15.2.6 ”短路 评价 


为 变量 dbHost 赋 值 先 使 用 if 语句 检查 process、env、DB_HOST 其 值 是否 为 空 值 ， 如 下 代码 所 示 : 





let dbHost; 
if (process.env.DB HOST) { 
dbHost = process.env.DB_HOST; 
} else { 
dbHost = 'localhost'; 
} 





这 种 情况 可 以 简写 为 : 





const dbHost = process.env.DB HOST || 'localhost'; 





15.2.7 “十进制 指数 


当 需 要 输入 的 数字 带 有 很 多 零 时 (2010000000) ， 可 以 采用 指数 (1e7) 来 代替 这 个 数字 ， 比 如 : 











for (let i = 0; i < 10000000; i++) {} 





可 简写 为 : 





for (let i = 0; i < le7; i++) {} 





下 面 的 语句 都 是 返回 true: 








le3 == 1000; 





15.2.8 WRB 








如 果 属 性 名 与 key 名 相同 ， 则 可 以 采用 ES6 的 方法 将 属性 名 略 去 ， 例 如 : 











const obj = { x:x, yry }; 





可 将 代码 简写 为 : 





const obj = { x, y }; 





15.2.9 ”箭头 函数 











虽然 传统 函数 的 编写 方法 更 易于 理解 和 编写 ， 但 其 不 利于 用 在 庶 套 函数 之 中 ， 如 下 代码 所 示 : 





function sayHello(name) { 
console.log('Hello', name) ; 


setTimeout (function() { 
console.log ('Loaded') 

}, 2000); 

list.forEach (function (item) { 
console.log(item) ; 

We 





使 用 箭头 函数 ， 可 简写 为 : 





sayHello = name => console.log('Hello', name); 
setTimeout (_ => console.log('Loaded'), 2000); 
list.forEach (item => console.log (item) ); 





15.2.10 ” 隐 式 返回 值 


通常 使 用 return 语 句 来 返回 函数 的 最 终结 果 ， 一 个 单独 语句 的 箭头 函数 能 隐 式 返 





回 其 值 ， 此 时 return 关 键 字 可 以 省 略 。 省 略 return 关 键 字 的 同时 ， 函 数 必须 省 略 {。 例 如 以 下 代码 : 








function calcCircumference (diameter) { 
return Math.PI * diameter 

} 

var func = function func() { 
return { foo: 1 }; 

ie 





可 简写 为 : 





calcCircumference = diameter => ( 
Math.PI * diameter; 

) 

var func = () => ({ foo: 1 }); 





15.2.11 参数 的 默认 值 

















为 了 向 函数 中 的 参数 传递 默认 值 ， 通 常 使 用 if 语句 来 编写 代码 ， 但 是 使 用 ES6 定 义 默认 值 会 更 简洁 一 些 ， 比 如 以 下 代码 : 





function volume(l, w, h) { 
if (w === undefined) 


; 





+ 
return 1 * w * h; 





可 简写 为 : 





volume = (l, w= 3, h=4) => (l*w*h); 
volume (2) //output: 24 





15.2.12 ”模板 字符 串 


传统 的 JS 语 言 ， 其 输出 模板 通常 是 这 样 写 的 : 





const welcome = 'You have logged in as ' + first + ' ' + last + '.' 
const db = 'http://' + host + ':' + port + '/' + database; 








ES6 可 以 使 用 反 引 号 和 $0 对 其 进行 简写 ， 代 码 如 下 : 





const welcome = “You have logged in as ${first} ${last}*; 
const db = “http://${host}:${port}/${database}*; 





15.213 ”解构 赋值 


下 面 的 代码 : 





const store = this.props.store; 
const entity = this.props.entity; 





可 简写 为 : 





const { store, entity } = this.props; 





在 解构 赋值 时 ， 可 以 修改 默认 的 变量 名 ， 如 下 代码 所 示 ， 第 二 个 变量 名 为 contact， 代 蔡 了 默认 的 entity: 





const { store, entity:contact } = this.props; 





152.14 ”多 行 字 符 串 


若 要 输出 多 行 字符 串 ， 可 使 用 (+) 来 拼接 ， 如 下 代码 所 示 : 





const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t' 
+ ‘adipisicing elit, sed do eiusmod tempor incididunt\n\t' 
+ ‘irure dolor in reprehenderit in voluptate velit esse.\n\t' 








但 若 使 用 反 引 号 ， 则 可 以 达到 简写 的 作用 ， 如 下 代码 所 示 : 





const lorem = “Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt 
irure dolor in reprehenderit in voluptate velit esse.~ 





15.2.15 “扩展 运算 符 


连续 三 个 点 表示 扩展 运算 符 ， 如 下 代码 所 示 ， 前 两 行 代码 是 复制 数组 ， 后 两 行 代码 是 复制 数组 ， 这 两 个 场景 都 可 以 使 用 扩展 运算 符 进行 简写 : 





// 连接 数组 

const odd = [1, 3, 5]; 

const nums = [2 ,4 , 6].concat (odd); 
// 复制 数组 

const arr = [1, 2, 3, 4]; 

const arr2 = arr.slice() 





可 简写 为 : 





// 连接 数组 
const odd = [1, 3, 5 ]; 
const nums = [2 ,4 , 6, http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...odd]; 


console. log (nums) ; // #4 2, 4, 6, 1, 3, 5] 
// 复制 数组 

const arr = [1, 2, 3, 4]; 

const arr2 = [..arr]; 

console. log(arr2) ; // tH. 1, 2, 3, 4] 





若 要 在 一 个 数组 的 任意 处 插入 另 一 个 数组 ， 也 可 以 使 用 扩展 运算 符 ， 如 下 代码 所 示 : 





let arr = [1, 3, 5 ]; 
let nms = [2, http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...arr, 4 , 6]; 
console. log (nums) // tH (2, 1, 3, 5, 4, 6] 





比 上 面 的 方法 稍微 麻烦 一 点 的 方法 是 这 样 的 : 





let arr = [1, 3, 5]; 
let nums = [2, 4, 6]; 
nums.splice(1,0,..arr);// splice 函 数 用 于 在 数组 的 指定 位 置 删 除 N 个 元 素 ， 并 补 入 新 元 素 
console.log(nums) // 输出 [2，1，3，5，4，6] 





也 可 以 使 用 扩展 运算 符 进行 解构 ， 如 下 代码 所 示 : 





const { a, b, http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...z } = { a: 1, b: 2, c: 3, d: 4 }; 
console.log(a) // 输出 1 

console.log(b) // 输出 2 

console.log(z) // 输出 { c: 3, d: 4 } 





15.2.16 ”强制 参数 








在 Js 中 ， 如 果 没 有 向 函数 参数 传递 值 ， 则 参数 为 undefined。 为 了 增强 参数 赋值 ， 可 以 使 用 if 语句 来 抛 出 异常 ， 或 者 使 用 强制 参数 简写 方法 。 例 如 : 

















function foo (bar) { 
if (bar === undefined) { 
throw new Error (' 参 数 缺失 异常 ') ; 
} 


return bar; 












































上 面 的 代码 是 通过 if 浏 断 抛 出 异常 ， 下 面 的 代码 则 是 使 用 强制 参数 的 简写 示例 ， 其 中 使 用 箭头 函数 略 写 的 函数 变量 UndefinedException 是 通用 的 ， 可 以 用 于 任何 一 个 需要 检测 参数 必要 性 的 函数 形 参 列 
























































表 中 。 





UndefinedException = () => { 
throw new Error ( "参数 缺失 异常 !) ; 
} 
foo = (bar = UndefinedException()) => { 


return bar; 


} 








JS 是 弱 安全 类 型 语言 ， 通 过 这 个 技巧 ， 可 以 提高 代码 的 安全 性 。 


15.2.17 ”新 数组 函数 find 











如 果 想 从 数组 中 查找 某 个 值 ， 通 常 需要 用 到 循环 ， 如 下 代码 所 示 ， 自 定义 实现 的 findDog 函 数 用 于 从 数组 pets 中 查找 type 为 Dog、name 为 Tommy 的 元 素 : 











const pets = [ 
{ type: 'Dog', name: 'Max'}, 
{ type: 'Cat', name: 'Karl'}, 
{ type: 'Dog', name: 'Tommy'}, 


] 
function findDog() { 
for(let i = 0; i<pets.length; ++i) { 
if (pets[i].type === 'Dog' && pets[i].name === 'Tommy') { 
return pets[i]; 


} 





但 在 ES6 中 ，find () 函数 能 实现 同样 功能 。 上 面 代码 中 的 findDog 可 简写 为 : 





pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy'); 
console.log (pet); // 输出 为 { type: 'Dog', name: 'Tommy' } 

















简写 后 的 代码 更 加 易 读 。find 是 JS ES6 语 法 内 在 支持 的 数组 函数 ， 在 上 面 的 代码 中 ， 它 接收 了 一 个 使 用 箭头 函数 略 写 、 同 时 又 因为 是 单行 代码 而 略 去 了 return 关 键 字 的 匿名 函数 。 











15.2.18 “双重 非 位 运算 操作 符 








如 下 代码 所 示 ，Math.floor 函 数 用 于 向 下 取 整 ， 运 行 结果 为 4: 



































if (Math.floor (4.9) == 4){ 


i 























使 用 双重 非 (~~) 位 运算 操作 符 ， 可 以 代替 Math.floor () ， 其 优势 在 于 运算 更 快 、 代 码 更 简洁 ， 代 码 示例 如 下 所 示 : 








if (~~4.9 == 4){ 


} 





第 16 章 WXSS 样 式 基础 




















CSSs 是 一 种 向 用 户 指定 文档 应 如 何 呈 现 的 语言 一 一 它 会 指定 文档 的 样式 、 布 局 等 。 微 信 小 程序 的 WXSSs 与 Web 开 发 中 的 CSS 具 有 相同 的 语法 。 


















































WXSS (WeiXin Style Sheets) 是 一 套 样式 语言 ， 用 于 描述 WXML 的 组 件 样式 。WXSS 可 决定 WXML 的 组 件 应 该 如 何 显示 。WXSS 具 有 CSS 的 大 部 分 特性 ， 微 信 团 队 主 要 对 CSS 进 行 了 两 方面 的 扩展 : 











“ 尺寸 单位 。 


“样式 导入 。 





























掌握 好 基础 的 CSS 语 法 之 后 ， 再 对 微 信 团 队 扩 展 的 部 分 加 以 了 解 ， 就 能 应 对 所 有 小 程序 开发 中 的 样式 问题 了 。 











16.1 “语法 基础 
































在 微 信 小 程序 中 ， 定 义 在 app.wxss 中 的 样式 为 全 局 样式 ， 其 作用 于 每 一 个 页 面 。 在 page 的 wxss 文 件 中 定义 的 样式 为 局 部 样式 ， 其 只 作用 在 对 应 的 页 面 ， 并 且 会 覆盖 app.wxss 中 相同 的 选择 器 。 




















16.1.1 尺寸 单位 rpx 



































rpx (responsive pixel) 可 以 根据 屏幕 宽度 进行 自 适应 调整 。 通 常 ， 规 定 的 屏幕 宽度 为 750rpx， 比 如 ， 在 iPhone6 上 ， 屏 幕 宽度 为 375px， 共 有 750 个 物理 像素 , 则 750rpx=375px=750 物 理 像 














素 ，1rpx=0.5px= 1 物理 像素 。 微 信 建 议 开 发 小 程序 时 设计 师 可 以 用 iPhone6 作 为 视觉 稿 的 标准 。 











16.1.2 ”样式 导入 








使 用 @import 语 句 可 以 导入 外 联 样式 表 ，@import 后 跟 需 要 导入 的 外 联 样式 表 的 相对 路 径 ， 用 














分 号 (; ) 表示 语句 结束 。 示 例 代 码 如 下 : 





/** common.wxss **/ 
.small-p { 
padding: 5px; 


/** app.wxss **/ 
@import "common.wxss"; 
-middle-p { 


padding: 15px; 





16.1.3 ”内 联 样式 




















框架 组 件 上 支持 使 用 style、class 属 性 来 控制 组 件 的 样式 。 


微 信 建议 ， 将 静态 样式 统一 写 到 





进 class 中 也 会 降低 开发 速度 ， 不 如 直接 写 在 style 




















class 中 。style 则 用 于 接收 动态 的 样式 ， 在 运行 时 会 进行 解析 ， 所 以 要 避免 将 静态 的 样式 写 进 style 中 ， 以 免 影响 泻 染 速度 。 但 在 实际 的 项 目 
属性 中 。 待 到 项 目 后 期 进行 代码 优化 时 ， 再 将 稳定 的 样式 移 进 class 也 不 迟 。 示 例 代码 如 下 : 














发 中 ， 将 频繁 改动 的 样式 写 





<view style="color:{{color}};" /> 
































class 用 于 指定 样式 规则 ， 其 属性 值 是 样式 规则 中 的 类 选择 器 名 ， 即 样式 类 名 的 集合 ， 样 式 类 名 不 需要 带 上 “.”， 样 式 类 名 之 间 可 用 空格 进行 分 隔 。 示 例 代码 如 下 : 





<view class="normal view norma2 view " /> 


16.1.4 样式 选择 器 


目前 支持 的 样式 选择 器 包含 以 下 几 种 。 


.class: 例如 .intro， 选 择 所 有 拥有 class="intro" 的 组 件 。 


- Hid: 例如 #firstname， 选 择 拥 


有 id="firtstname" 的 组 件 。 


- element: 例如 view， 选 择 所 有 view 组 件 。 


- element, element: 例如 “view，checkbox”， 选 择 所 有 文档 的 view 组 件 的 checkbox 组 件 。 


: after: 例如 “view: 


: : before: 例如 “view: 


: before”， 在 view 组 件 的 前 面 插入 内 容 。 


“ 在 小 程序 开发 中 经 常用 到 的 是 类 选择 器 “.class” 和 元 素 选择 器 “element”。 


16.2 CSS 基础 











: after”， 在 view 组 件 后 面 插入 内 容 ， 一 般 用 于 实现 装饰 线 效果 和 icon 图 标 。 








正如 之 前 提 到 的 ，CSS 是 一 种 向 














户 指定 文档 应 如 何 呈 现 的 语言 。Web 浏 览 器 将 CSS 规 则 应 














于 组 件 以 影响 它们 的 显示 方式 。 一 个 CSS 规 则 由 以 下 内 容 组 成 。 





' 一 组 属性 : 属性 的 值 更 新 了 HTML 中 内 容 的 显示 方式 。 比 如 ， 如 果 要 让 元 素 的 宽度 是 其 父 元 素 的 50%、 元 素 背 景 变 为 红色 ， 那 么 分 别 需 要 设置 width: 50%, background-color: redo 


“ 一 个 选择 器 : 它 会 选择 元 素 ， 被 选择 的 一 个 或 N 个 元 素 是 属性 值 要 作用 的 目标 对 象 。 比 如 ， 将 CSS 规 则 应 用 到 HTML 文 档 中 的 所 有 <p> 元 素 上 ， 可 进行 如 下 声明 : 





pi 
ias 


现在 让 我 们 来 看 一 个 例子 ， 如 下 代码 所 示 的 是 包含 了 两 个 规则 的 非常 简单 的 CSS 示 例 : 


hi { 
color: blue; 
background-color: yellow; 
border: 1px solid black; 

} 

pí 


color: red; 























第 一 条 规则 从 h1 选 择 器 开始 ， 这 意味 着 它 将 其 属性 值 应 用 到 <h1> 元 素 之 上 了 ， 它 包含 了 三 个 























属性 和 属性 各 自 的 值 (每 个 属性 / 值 对 称 为 一 个 声明 ) 。 





第 一 个 声明 将 文本 颜色 设置 为 蓝 色 。 


“ 第 二 个 声明 将 背景 颜色 设置 为 黄色 。 


“ 第 三 个 声明 将 标题 (hl 是 标题 元 素 ) 边框 (border) RHA: 1 像素 宽 、 实 线 (RRMA. RAF) 


+ MEARE. 






































第 二 个 规则 从 p 选 择 器 开始 ， 这 意味 着 它 将 其 属性 值 应 用 到 <p> 元 素 之 上 了 。 它 包含 一 条 声明 ， 


那么 ，CSs 是 如 何 工作 的 呢 ? 











该 声明 将 字体 颜色 设置 为 红色 。 





当 浏 览 器 显示 文档 时 ， 它 必须 将 文档 的 内 容 与 其 样式 信息 相 结 合 。 在 此 过 程 中 ， 会 分 成 两 个 阶段 来 处 理 文档 ， 具 体 如 图 16-1 所 示 。 














1) 浏览 器 将 HTML 和 CSS 转 化 成 DOM (文档 对 象 模型 ) 。DOM 在 计算 机 内 存 中 表示 文档 。 它 把 文档 内 容 和 其 样式 结合 在 一 起 。 


2) 浏览 器 显示 DOM 的 内 容 。 














微 信 小 程序 的 视图 文档 树 是 在 react 虚 拟 DOM 的 基础 之 上 构建 的 ， 其 渲染 机 制 与 Web 页 面相 同 。 













16.2.1 属性 与 属性 值 


CSS 是 由 如 下 两 块 内 容 组 合 而 成 的 。 


图 16-1 


: 属性 : 一 些 人 类 可 理解 的 标识 符 ， 这 些 标识 符 将 指出 用 户 想 要 修改 哪些 样式 特征 ， 例 如 font、width、background color 等 。 


构建 DOM 文 档 树 


演 染 显示 





附加 样式 到 文档 树 





“ 属性 值 : 每 个 指定 的 属性 都 需要 给 定 一 个 值 ， 这 个 值 表 示 用 户 想 要 把 那些 样式 特征 修改 成 什么 样 ， 例 如 ， 用 户 想 把 字体 、 宽 度 或 背景 颜色 改 成 什么 样 等 。 














一 个 属性 和 其 对 应 的 属性 值 一 起 组 成 的 属性 / 值 对 被 称 作 一 个 CSS 声 明 。CSS 声 明 会 被 放置 在 一 个 CSS 声 明 块 中 。 最 终 ， 一 个 CSS 声 明 块 与 选择 器 相 结 合 形成 一 个 CSS 规 则 集 。 








下 面 的 M1、p 便 是 CSS 规 则 集 : 





hl { 
colour: blue; 
background-color: yellow; 
border: 1px solid black; 


color: red; 





16.2.2 CSS 声明 


为 CSS 属 性 设置 特定 的 值 是 CSS 语 言 的 核心 功能 。CSS 引 擎 会 通过 计算 ,将 对 应 的 CSS 声 明 应 用 
是 ，CSS 的 属性 和 属性 值 都 是 区 分 大 小 写 的 。 属 性 和 

















属性 值 之 间 ， 用 




















英文 半角 冒号 (: ) 分 隔 ， 














如 图 16-2 所 示 。 





background-color 


图 16-2 


如 果 使 用 了 未 知 属性 ， 或 者 对 属性 赋予 了 无 效 值 ， 那 么 该 声明 会 被 视 为 无 效 ， 浏 览 器 的 CSS 引 警 会 完全 忽略 它 。 











约 有 超过 300 个 不 同 的 属性 以 及 数 倍 于 











属性 的 





属性 值 。 





属性 和 





属性 值 不 能 任意 组 合 ， 每 个 





到 页 面 的 每 一 个 元 素 之 上 ， 从 而 使 得 元 素 能 以 适当 的 方式 布局 ， 并 展示 出 适当 的 样式 。 特 别 需要 注意 的 




















属性 都 有 一 个 已 经 定义 好 的 可 用 





属性 值 范围 。 在 小 程序 开发 中 ， 微 信 Web 开 发 者 工具 可 以 给 出 友好 的 属性 名 、 


属性 值 的 提示 ， 但 目前 仅 限 于 WXSS 文 件 中 。 





16.2.3 CSS 声明 块 


声明 按 块 (blocks) 分 组 ， 每 一 组 声明 都 用 一 对 大 括号 括 起 来 ， 以 “{” 开 始 ， 以 “}” 结束 。 





声明 块 里 的 每 一 个 声明 都 必须 用 半角 分 号 “; ”分 隔 ， 和 否则 代码 不 会 生效 。 声 明 块 里 的 最 后 一 个 声明 结束 的 地 方 ， 不 需要 加 分 号 ， 但 是 最 后 加 分 号 是 一 个 好 习惯 ， 如 图 16-3 所 示 。 









background-colo @ | 






图 16-3 


16.2.4 “CSS 选 择 器 和 规则 


如 图 16-4 所 示 ， 我 们 需要 在 每 个 声明 块 之 前 都 加 上 选择 器 ， 选 择 器 是 一 种 模式 ， 它 能 在 页 面 上 匹配 一 些 元 素 。 其 可 使 相关 的 声明 仅 被 应 用 到 被 选择 的 元 素 之 上 。 选 择 器 加 上 声明 块 被 称 为 规则 集 ， 通 常 
简称 为 规则 。 













div p, #id:first-line 






background-color : red 
background-style : none 









图 16-4 





， 因 此 ， 一 个 给 定 的 属性 可 能 被 多 个 


J 
型 








选择 器 可 以 很 复杂 ， 用 户 可 以 制作 一 个 匹配 多 种 元 素 的 规则 ， 这 是 通过 把 多 个 选择 器 囊括 成 用 逗号 分 隔 的 一 组 选择 器 来 达成 的 。 一 个 元 素 可 以 被 多 个 选择 器 所 匹 
规则 设置 多 次 。 





Bus 如 果 链 或 组 中 的 某 个 选择 器 无 效 ， 比 如 使 用 了 未 知 的 擅 元 素 或 伪 类 ， 那 么 整个 选择 器 组 都 会 无 效 ， 这 也 会 导致 整个 规则 全 部 无 效 并 被 忽略 。 


16.2.5 “CSS 最 佳 实践 








CSS 语 法 并 不 难 写 ， 如 果 用 户 写 了 一 些 错误 的 规则 ， 它 将 仅 被 忽略 。 但 是 ， 即 使 有 这 样 的 机 制 ， 这 里 也 有 一 些 值得 了 解 的 最 佳 实践 ， 它 可 使 CSS 代 码 更 易于 使 用 和 维护 。 





1. 行 间 空白 
行 间 空白 实际 上 意味 着 一 些 空格 、 制 表 符 以 及 一 些 新 行 。 可 以 通过 添加 空格 的 方式 使 你 的 样式 表 更 具 可 读 性 。 


与 处 理 HTML 的 方式 类 似 ， 浏 览 器 会 倾向 于 忽略 你 的 CSS 代 码 中 的 许多 空格 ; 许多 空格 的 意义 仅仅 是 增加 了 可 读 性 。 在 下 面 的 第 一 个 例子 中 ， 我 们 的 每 一 个 声明 (以 及 规则 的 开始 /结束 ) 都 在 各 自 的 行 
这 可 以 说 是 编写 CSS 的 好 方法 ， 因 为 它 很 容易 维护 和 理解 : 





上 








body { 
font: lem/150% Helvetica, Arial, sans-serif; 
padding: lem; 
margin: 0 auto; 
max-width: 33em; 


hl { 
font-size: 1.5em; 
} 





也 可 以 编写 如 下 所 示 的 样式 规则 ， 但 这 样 会 更 难 读 : 





body {font: lem/150% Helvetica, Arial, sans-serif; padding: lem; margin: 0 auto; max-width: 33em;} 
hl {font-size: 1.5em;} 





一 般 来 说， 选择 器 的 命名 规则 要 遵守 团队 的 风格 ， 如 果 没有 ， 则 请 参考 weui 类 库 的 风格 。 














在 CSS 中 ， 需 要 注意 的 空格 应 当 是 属性 和 属性 值 边 上 的 空格 。 例 如 ， 以 下 是 有 效 的 CSS: 





margin: 0 auto; 
padding-left: 10px; 





以 下 是 无 效 的 CSS: 





margin: Oauto; 
padding- left: 10px; 








因为 0auto 不 被 解析 为 margin 属 性 的 有 效 值 (0 和 auto 是 两 个 单独 的 值 ) 。 








2. 注 释 











与 其 他 语言 一 样 ， 提 倡 在 CSs 中 使 用 注释 ， 以 帮助 你 或 他 人 在 几 个 月 后 遇 上 代码 时 了 解 代码 是 如 何 工作 的 ， 从 而 理解 该 代码 。 














CSS 中 的 注释 以 /* 开 始 并 以 */ 结 束 ， 例 如 : 





| rT Tt RRA REE TAREE RRA a 
body {font: lem/150% Helvetica, Arial, sans-serif; padding: lem; margin: 0 auto; max-width: 33em; } 





3. 速 记 

















诸如 font、background、padding、border 和 margin 的 一 些 属性 被 称 为 速记 属性 ， 这 是 因为 它们 允许 用 户 在 一 行 设置 多 个 属 








iF 























例如 ， 如 下 这 行 代码 : 





padding: 10px 15px 15px Spx; 





等 同 于 如 下 代码 : 





padding-top: 10px; 
padding-right: 15px; 
padding-bottom: 15px; 
padding-left: 5px; 





而 如 下 这 行 代码 : 





background: red url (bg-graphic.png) 10px 10px repeat-x fixed; 





则 与 以 下 这 些 代码 做 了 相同 的 事 : 





background-color: red; 
background-image: url (bg-graphic.png) ; 
background-position: 10px 10px; 
background-repeat: repeat-x; 
background-scroll: fixed; 





关于 具体 的 样式 名 、 样 式 值 ， 推 荐 查看 工具 网 站 : http://www.w3school.com.cn/html/html_css.asp. 


第 17 章 ”Go 语言 基础 

















Go 是 Google 开 发 的 一 种 静态 强 类 型 、 编 译 型 、 并 发 型 ， 并 具有 垃圾 回收 功能 的 编程 语言 。Go 语 言 代码 文件 以 “.go” 作 为 扩展 名 。 如 图 17-1 所 示 ， 作 为 高 级 编程 语言 进化 的 末端 ， 它 综合 了 多 种 语言 
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本 章 将 通过 一 些 短小 精 悍 的 代码 练习 ， 完 成 对 Go 语言 的 基础 学 习 。 每 一 节 对 应 一 个 知识 点 。 本 章 共 60 余 个 代码 清单 ， 可 供 读者 练习 使 用 。 








17.1 ”基础 概念 


























关键 字 是 编程 语言 保留 使 用 的 ， 也 称 保留 字 。 如 下 代码 所 示 的 是 Go 语言 所 有 的 保留 字 。 在 对 变量 或 者 函数 命名 时 ， 是 不 能 使 用 这 些 保留 字 的 。 














break default func interface select 
case defer go map struct 

chan else goto package switch 
const fallthrough if range type 
continue for import return var 








相 比 于 其 他 语言 ，Go 语 言 只 有 25 个 保留 字 ， 但 其 实现 的 功能 却 不 逊 于 其 他 任何 一 门 语言 。 





17.1.1 hello worldSimport 


凡 介绍 编程 语言 的 书 ， 都 免不了 要 奉 上 “hello world” 这 个 经 典 的 案例 程序 ， 这 里 也 不 例外 ， 如 下 代码 所 示 为 最 简单 的 Go 程序 : 








package main 
import "fmt" 
func main() { 


fmt.Println("hello, world") 
} 














将 之 保存 为 “hello.go”， 在 命令 行 终端 中 执行 “go run hello.go”， 即 可 测试 代码 (前 提 是 已 经 安装 了 Go 语言 的 开发 环境 ， 安 装 方法 参见 本 书 的 7.1 节 ) 。 











在 上 述 代 码 中 ， 第 一 行 代码 用 于 声明 包 ， 关 于 包 的 讲解 请 参见 17.1.2 节 。 











17.1.2 包 


每 个 Go 程序 都 是 由 包 组 成 的 。 在 如 下 代码 中 ， 程 序 运行 的 入 





即 为 包 main : 














package main 


import ( 
"fmt" 
"math" 


) 


func main() { 


fmt.Println (math. Pi) 


} 











按照 惯例 ， 包 名 要 与 导入 路 径 的 最 后 一 个 目录 一 致 。 例 如 math/rand 包 就 是 由 package rand 语 句 开始 的 。 


























这 个 代码 用 圆 括号 组 合 了 导入 ， 这 就 是 “打包 ”导入 语句 。 在 导入 了 一 个 包 之 后 ， 就 可 以 


























其 导出 的 名 称 来 调 








它 。 在 Go 语言 








在 代码 中 ， 可 以 编写 多 个 导入 语句 ， 示 例如 下 : 


， 只 有 首 字母 大 写 的 名 称 才 是 被 导出 的 。 





import "fmt" 
import "math" 














不 过 使 


打包 的 导入 语句 是 更 好 的 形式 。 


如 果 包 名 是 目录 ， 那 么 程序 就 会 去 相应 的 目录 中 查找 ， 否 则 就 会 去 $GOPATH 或 $GOROOT 下 查找 。 














关于 使 


1. 使 用 点 操作 符 引 入 包 














使 用 点 操作 符 引入 包 之 后 ， 可 以 省 略 包 前 缀 ， 如 下 面 的 代码 所 示 ， 可 以 直接 使 





import 关 键 字 引入 包 ， 有 以 下 几 点 值得 注意 。 这 些 技巧 虽然 不 一 定 都 会 















































Println 方 法 ， 代 蔡 fmt.Println : 











到 ， 但 了 解 它们 ， 有 助 于 理解 开源 项 目的 源码 ， 尤 其 是 第 3 个 技巧 ， 在 与 数据 库 驱动 相关 的 项 目 中 经 常 被 使 用 。 





import ( 
« “Smt 
) 


Printin ("hello world") 





2. 别 名 引入 








如 果 同 时 引入 了 两 个 名 称 相同 的 包 ， 为 了 避免 麻烦 ， 一 般 在 引入 时 对 其 中 一 个 包 设置 一 个 别名 ， 如 下 代码 所 示 : 


import ( 
E "fmt" 
) 


£.Println ("hello world") 





3AE 








由 于 Go 在 引入 包 时 , 会 























包 的 init 方 法 。 使 用 忽略 操作 符 “ ” ， 可 以 忽略 这 种 自动 调用 ， 如 下 面 的 代码 所 示 : 





Package sim 


import ( 


"github .com/go-sql-driver/mysql" 
— "github.com/mattn/go-sqlite3" 
“github. com/go-xorm/core" 
"github .com/go-xorm/xorm"™ 


) 


上 面 的 示例 源码 ， 摘 自 sim.go 类 库 ， 地 址 如 下 : 


https://github.com/rixingyike/sim.go/blob/master/lib/db.go 


17.1.3 ”函数 


如 下 代码 是 一 个 函数 声明 的 示例 : 





Package main 


import "fmt" 


func add(x int, y int) int { 


return x + y 
} 


func main() { 


fmt.Println (add (42, 13)) 


} 





在 上 述 代码 中 ，add 与 main 均 是 函数 。 函 


1. 多 值 返 回 











如 果 两 个 或 多 个 连续 的 函数 命名 参数 都 是 同一 类 型 时 ， 那 么 除了 最 后 一 个 参数 类 型 之 外 ， 前 面 的 其 他 参数 类 型 都 可 以 省 略 。 


在 如 下 代码 中 ， 第 一 行 的 声明 可 以 简写 为 第 二 行 的 形式 : 


数 可 以 没有 参数 也 可 以 接收 多 个 参数 。 在 这 个 例子 中 ，add 接 受 了 两 个 int 类 型 的 参数 。 注 意 ， 类 型 在 变量 名 之 后 。 





func abs(x int, y int) 
func abs(x, y int) 


// 简 写 








函数 可 以 返回 任意 数量 的 返回 值 。 在 如 下 代码 中 ，swap 函 数 返回 了 两 个 字符 串 : 








package main 
import "fmt" 


func swap(x, y string) (string, string) { 
return y, x 

$ 

func main() { 
a, b := swap("hello", "world") 
fmt.Println (a, b) 












































2. 命 名 返回 值 
Go 的 返回 值 可 以 被 命名 ， 并 且 可 以 像 变 量 那 样 使 用 。 返 回 值 的 名 称 应 当 















































下 代码 的 方法 split 中 ，x、y 即 是 命名 的 返回 值 : 
































有 一 定 的 意义 ， 在 使 用 gofmt 格 式 化 时 ， 可 以 作为 文档 使 用 。 没 有 参数 的 return 语 句 将 返回 结果 的 当前 值 ， 即 直接 返回 。 在 如 

















Package main 
import "fmt" 


func split(sum int) (x, y int) { 
x=sum* 4/9 
y= sm- x 
return 


func main() { 
fmt .Println (split (17) ) 
} 





函数 split 的 return 即 为 直接 返回 。 


1714 变量 








在 下 面 的 代码 中 ，var 语 句 定义 了 一 个 变量 的 列表 。 与 函数 的 参数 列表 一 样 ， 类 型 是 放 在 后 面 的 。var 语 句 可 以 定义 在 包 或 函数 级 别 ， 例 如 变量 c、python 等 : 





Package main 
import "fmt" 


var c, python, java bool 
func main() { 


var i int 
fmt.Println(i, c, python, java) 





1. 初 始 化 变量 


变量 定义 可 以 包含 初始 值 ， 每 个 变量 对 应 一 个 。 如 果 初 始 化 是 使 




















表达 式 ， 则 可 以 省 略 类 型 ; 


变量 可 从 初始 值 中 获得 类 型 。 在 如 下 代码 里 ， 对 变量 c、python、java 的 声明 省 略 了 类 型 : 





Package main 
import "fmt" 


var i, j int = 1, 2 
func main() { 


var c, python, java = true, false, "no!" 
fmt.Println(i, j, c, python, java) 





上 述 代码 在 声明 变量 c、python、java 时 没有 指定 类 型 ，Go 从 字面 值 猜 到 了 变量 的 类 型 。 











2. 变 量 的 短 声 明 
在 函数 中 ，“: =” 用 于 简洁 赋值 语句 ， 在 明确 类 型 的 地 方 可 以 用 于 蔡 代 var 定 义 。 但 函数 外 的 每 个 语句 都 必须 以 关键 字 开始 ，“: =” 结 构 不 能 使 用 在 函数 之 外 。 在 如 下 代码 中 ， 变 量 k 使 





一 般 情 况 下 ， 仅 在 if 语句 和 for 语 句 中 使 用 短 声明 。 









































的 即 是 短 








Package main 
import "fmt" 


func main() { 
var i, j int = I; 2 
k := 3 
c, python, java := true, false, "no!" 


fmt.Println(i, j, k, c, python, java) 





17; 


1.5 ”基本 类 型 


以 下 代码 所 示 的 是 Go 语言 的 基本 类 型 : 





bool 布尔 值 

string 字符 串 

int int8 int16 int32 int64 整 型 

uint uint8 uint16 uint32 uint64 uintptr 正 数 

byte uint8 的 别名 ， 字 节 

rune int32 的 别名 ， 代 表 一 个 Unicode 码 

float32 float64 浮 点 数 

complex64 complex128 复数 ， 数 学 专业 会 用 到 ， 一 般 开 发 中 极 少 用 到 

















如 下 示例 代码 演示 了 不 同类 型 的 变量 。 同 时 ， 与 导入 语句 一 样 ， 变 量 的 定义 被 var 打 包 在 了 一 个 语法 块 中 : 











Package main 


import ( 
"fmt" 
“math/cmp1x" 
) 
var ( 
ToBe bool = false 
MaxInt uint64 = 1<<64 -1 
z complex128 = cmplx.Sqrt(-5 + 12i) 


func main() { 
const f = "$T (bv) \n" 
fmt.Printf (f, ToBe, ToBe) 
fmt.Printf (f, MaxInt, MaxInt) 
fmt.Printf(f, z, z) 





1. 零 值 

















若 变量 在 定义 时 没有 明确 的 初始 化 ， 则 赋值 为 零 值 。 不 同 数据 类 型 的 零 值 都 有 其 确切 的 定义 ， 具 体 如 下 。 
“ 数值 类 型 为 0。 
+ 布尔 类 型 为 false。 
FRAN (SPB) 。 


以 下 代码 所 示 的 是 四 种 基本 类 型 的 零 值 的 测试 代码 : 





Package main 
import "fmt" 


func main() { 
var i int 
var f float64 
var b bool 
var s string 
fmt.Printf ("v %v %v %q\n", i, f, b, s) 





2. 类 型 转换 


表达 式 T (v) 可 将 值 v 转 换 为 类 型 Tr。 以 下 代码 所 示 的 是 一 些 关 于 数值 的 转换 : 





var i int = 42 
var f float64 = float64 (i) 
var u uint = uint (f) 





以 下 代码 所 示 的 是 一 种 更 加 简单 的 编写 形式 : 





i i= 42 
f := float64 (i) 
u := uint (f) 

















在 旧版 本 里 ，Go 在 使 用 不 同类 型 的 变量 对 新 变量 进行 赋值 时 需要 显 式 转换 ， 但 如 今 已 经 不 再 需要 了 ， 以 下 所 示 的 是 测试 代码 : 

















Package main 


import ( 
"fmt" 
"math" 


func main() { 
var x, y int = 3, 4 
var f float64 = math.Sqrt (float64 (x*x + y*y)) 
var z int = int(f) 
fmt.Println(x, y, z) 








可 以 看 到 ， 移 除 变量 f 的 类 型 声明 和 显 式 转换 ( 粗 体 部 分 ) ， 对 结果 没有 影响 。 读 者 在 阅读 某 些 github 项 目 源码 的 时 候 ， 可 能 会 看 到 类 似 的 显 式 转换 代码 ， 可 将 其 忽略 。 


3. 类 型 推导 











在 定义 一 个 变量 但 不 指定 其 类 型 时 ， 使 用 没有 类 型 的 var 语 句 或 “: =” 语 句 均 可 ， 变 量 的 类 型 由 右边 的 字面 值 推导 即 可 得 出 。 














在 如 下 代码 中 ， 当 字面 值 常量 定义 了 类 型 时 ， 新 变量 的 类 型 与 其 相同 : 








var i int 
j := i // j 也 是 一 个 int 











但 是 当 右 边 包 含 了 未 指名 类 型 的 数字 常量 时 ， 新 的 变量 就 可 能 是 int、float64 或 complex128。 这 取决 于 常量 的 精度 ， 如 以 下 代码 所 示 : 





:= 42 // int 
f := 3.142 // float64 
:= 0.867 + 0.51 // complex128 





下 面 尝试 修改 以 下 代码 中 变量 v 的 初始 值 ， 并 观察 控制 台 打 印 结果 的 变化 : 





Package main 
import "fmt" 


func main() { 
v := 42 // 修改 这 个 数值 
fmt.Printf ("v is of type %T\n", v) 





IFA 














常量 的 定义 与 变量 类 似 ， 只 不 过 它 使 用 的 是 const 关 键 字 。 常 量 可 以 是 字符 、 字 符 串 、 布 尔 或 数字 类 型 的 值 ， 但 不 能 “: =” 语 法 来 定义 。 以 下 所 示 的 是 测试 代码 : 

















Package main 
import "fmt" 


const Pi = 3.14 


func main() { 
const World = "世界 " 
fmt.Println("Hello", World) 
fmt.Println("Happy", Pi, "Day") 
const Truth = true 
fmt.Println("Go rules?", Truth) 








在 上 述 代码 中 ，Pi、World 均 是 常量 ， 它 们 之 间 仅 作用 域 不 同 。 


关于 数值 常量 





数值 常量 是 高 精度 的 值 。 一 个 未 指定 类 型 的 常量 将 由 上 下 文 来 决定 其 类 型 。 在 以 下 代码 中 ， 常 量 Big、Small 是 由 函数 来 决定 其 精度 的 。 








Package main 
import "fmt" 


const ( 
Big =1 << 100 
small = Big >> 99 


func needInt (x int) int { return x*10 + 1 } 
func needFloat (x float64) float64 { 
return x * 0.1 
} 
func main() { 
fmt. Println (needInt (Smal1) ) 
fmt. Println (needFloat (Small)) 
fmt. Print1n (needFloat (Big) ) 





17.2 ”条件 控制 语 ; 
本 节 主 要 介绍 for、if、switch 等 条 件 关键 字 。 


17.2.1 for 循环 


Go 只 有 一 种 循环 结构 ， 即 for 循 环 ， 基 本 的 for 循 环 不 使 用 ”() ”， 这 一 点 与 JS 语 言 不 同 。 示 例 代 码 如 下 : 





Package main 
import "fmt" 


func main() { 


for i := 0; i < 10; i++ { 
sum += i 


fmt .Print1n (sum) 





与 C 或 者 Java 一 样 ， 在 Go 语言 中 ， 可 以 让 前 置 、 后 置 语句 为 空 ， 示 例 代码 如 下 : 








甚至 可 以 省 略 分 号 ，C 的 while 在 Go 中 称 为 for， 示 例 代 码 如 下 : 





for sum < 1000 { 
sum += sum 














事实 上 ， 在 Go 语言 里 ， 如 果 省 略 了 循环 条 件 ， 那 么 循环 就 不 会 结束 了 。 这 种 情况 适 














于 socket 轮 询 等 场景 。 示 例 代码 如 下 : 





func main() { 
for { 
} 





17.2.2 if 语句 


与 for 相 同 ，i 放 语句 没有 ”() ”， 但 “人 是 必需 的 。 示 例 代码 如 下 : 





package main 

import ( 
"fmt" 
"nath" 


) 


func sqrt(x float64) string { 
if x< 
return sqrt (-x) + "i" 
} 
return fmt.Sprint (math. Sqrt (x) ) 


func main() { 
fmt.Println (sqrt (2), sqrt (-4)) 
i 





关于 if 的 便捷 语句 


与 for 一 样 ，if 语 句 可 以 在 条 件 之 前 执行 一 个 简单 的 语句 ， 但 是 这 个 语句 定义 的 变量 的 作用 域 仅 在 if 范 上 




















之 内 ， 这 就 是 if 的 便捷 语句 ， 示 例 代码 如 下 : 








func pow(x, n, lim float64) float64 { 
if v := math.Pow(x, n); v < lim { 
return v 
} 


return lim 


func main() { 
fmt. Print1n ( 
pow (3, 2, 10), 


pow(3, 3, 20), 





在 if 的 便捷 语句 中 定义 的 变量 同样 可 以 在 任何 对 应 的 else 块 中 使 用 ， 示 例 代 码 如 下 : 





if v := math.Pow(x, n); v < lim { 


return v 
} else { 


fmt.Printf ("g >= %g\n", v, lim) 


} 





17.2.3 ”switch 语句 


除非 以 fallthrough 语 名 结束 ， 否 则 分 支 会 自动 终止 ， 这 点 与 JS 语言 不 同 ， 需 要 显 式 调 




















break， 如 以 下 代码 所 示 : 





package main 


import ( 
“emt 
"runtime" 


func main() { 
fmt.Print("Go runs on ") 


switch os := runtime.GOOS; os { 


case "darwin": 
fmt.Println ("OS X 
case "linux": 


") 


fmt. Print1n ("Linux.") 


default: 


// freebsd, openbsd, 
// plan9, windowshttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/... 


fmt.Printf("%s.", 


os) 





switch 的 条 件 会 按 从 上 到 下 的 顺序 执行 ， 当 





匹配 成 功 的 时 候 就 停止 ， 如 以 下 代码 所 示 : 





switch i { 
case 0: 
case f(): 
} 








在 上 述 代 码 中 ， 当 等 于 0 时 不 会 调用 f。 


没有 条 件 的 switch 同 switch true 一 样 ， 这 一 构造 使 得 可 以 采 



































更 清晰 的 形式 编写 长 的 if-else 语 句 ， 


如 以 下 代码 所 示 : 





func main() { 
t := time.Now() 
switch { 
case t.Hour() < 12: 


fmt .Println ("Good morning!") 


case t.Hour() < 17: 


fmt.Println("Good afternoon.") 


default: 


fmt .Println ("Good evening.") 


} 





以 上 代码 ，switch 逻 辑 仅 会 执行 一 遍 。 


17.24 defer 





defer 语 名 会 延迟 函数 的 执行 ， 直 

















到 上 层 函 数 返回 为 止 。 延 迟 调 有 























的 参数 会 立刻 生成 ， 但 是 在 上 层 函 数 返回 之 前 ， 函 数 都 不 会 被 调用 ， 如 以 下 代码 所 示 : 

















Package main 
import "fmt" 


func main() { 


defer fmt.Println ("world") 


fmt .Println ("hello") 





想象 一 下 ， 以 上 程序 会 先 打印 哪个 单词 ? 








defer 相 当 于 预约 了 一 个 延迟 调 有 











17.3 ”复杂 类 型 


17.3.1 指名 


， 它 一 般 用 了 








文件 操作 句柄 等 资源 的 内 存 释 放 。 延 迟 的 函数 调用 














被 压 入 一 个 栈 中 。 当 函数 返回 时 ， 会 按照 后 进 先 出 的 顺序 调用 





指针 保存 了 变量 的 内 存 地 址 。 类 型 打 是 指向 类 型 T 的 值 的 指针 ， 其 零 值 是 nil。 如 以 下 代码 所 示 ，p 就 是 一 个 指针 : 


被 延迟 的 函数 调用 。 








var p *int 














在 以 下 代码 中 ，& 符 号 会 生成 一 个 指向 其 作用 对 象 的 指针 : 








i := 42 
p= &i 





在 以 下 代码 中 ，* 符 号 表示 指针 指向 的 是 底层 的 值 : 





fmt .Println (*p) 


Ti. 
*p = 21 // ii 





与 C 语 言 不 同 ，Go 没 有 指针 运算 。 


17.3.2 ”结构 体 





一 个 结构 体 struct 就 是 一 些 字 段 的 集合 


。type 的 含义 与 其 字面 意思 相符 ， 相 当 于 定义 了 一 组 字段 。 在 如 下 代码 中 ，Vertex 是 一 个 结构 体 ， 结 构 体 字段 可 使 














点 号 来 访问 : 











package main 
import "fmt" 


type Vertex struct { 
X int 
Y int 


func main() { 
fmt .Println(Vertex{1, 2}) 
} 











在 如 下 代码 中 ， 结 构 体 字段 可 以 通过 结构 体 指针 来 访问 : 
v := Vertex{1, 2} 

p := av 

p.X = led 

关于 结构 体 声明 文法 











结构 体 声 明文 法 表示 以 结构 体 字段 的 值 作 为 列表 来 新 分 配 一 个 结构 体 ， 使 用 








"Name: " 


语法 仅 会 列 出 部 分 字 


段 ， 此 时 与 字段 名 的 顺序 无 关 。 在 如 下 代码 中 ，Vertex{X: 1} 便 指定 了 X 字 段 : 





vl = Vertex{1, 2} // 类 型 为 Vertex 
v2 = Vertex{X: 1} // Y:0 
v3 = Vertex{} // X:0 和 Y:0 


p = &Vertex{1，2} // 类 型 为 *Vertex 








其 中 ,特殊 的 前 级 & 将 返回 一 个 指向 结构 体 的 指针 。 


17.3.3 数组 


类 型 [n]T 是 一 个 包括 n 个 类 型 为 T 的 值 的 数组 。 在 如 下 代码 中 ， 声 明了 一 个 数组 ， 


a 是 一 个 有 10 个 整数 的 数组 : 





var a [10]int 





在 下 面 的 代码 中 ， 数 组 的 长 度 是 其 类 型 的 一 部 分 ， 不 能 改变 : 








Package main 
import "fmt" 


func main() { 
vara [2] string 
a[0] = "Hello" 
a[l] = "World" 
fmt. printin (a[0], a[1]) 
fmt .Println (a) 
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一 个 切片 (slice) 会 指向 一 个 序列 的 值 ， 并 且 其 包含 了 长 度 的 信息 。[]T 是 一 个 元 素 类 型 为 ?的 slice。 在 如 下 代码 中 ，p 是 一 个 slice: 





package, main 
import "fmt" 


func main() { 
p ;= []int{2, 3, 5, 7, 11, 13} 
fmt.Println("p ==" p) 
for i:=0; i< eh: i { 
fmt .Printf£("p[%d] == %d\n", i, plil) 
} 








Go 语言 的 数组 不 能 改变 大 小 ， 但 











1. 重 新 切片 





slice 可 以 重新 切片 ， 创 建 一 个 新 的 slice 值 将 指向 相同 的 数组 。 因 此 表达 式 








2. 如 何 构造 slice 











为 有 slice 的 存在 ， 不 能 改变 大 小 的 次 端 也 就 不 存在 了 。 


“slo: hi]” 表 示 从 lo 到 hi-1 的 slice 元 素 ， 包 含 两 端 。 


m “sillo: lo]” 是 空 的 ， 但 “sllo: lo+1]” 则 表示 有 一 个 元 素 了 。 











slice 由 函数 make 创 建 ， 其 会 分 配 一 个 零 长 度 的 数组 ， 并 且 返 回 一 个 slice 指 向 这 个 数组 。 在 如 下 代码 中 ，make 创 建 了 数组 a， 该 数组 拥有 5 个 元 素 : 
a := make([]int, 5) // len(a)=5 

为 了 指定 容量 ,可 将 第 三 个 参数 传递 到 make， 示 例 代码 如 下 : 

b := make([]int, 0, 5) // len(b)=0, cap(b)=5 

b 二 bf cap(b)] // Len tb) =5, cap(b)=5 

b = b[1:] // len(b)=4, cap (b)=4 





以 下 是 关于 函数 make 的 练习 代码 : 





Package main 


import "fmt" 


func main() { 


a := make([]int, 5) 
printSlice("a", a) 

b := make([]int, 0, 5) 
printSlice("b", b) 

c := b[:2] 
printSlice("c", c) 

d := c[2:5] 


printSlice("d", d) 
} 
func printSlice(s string, x []int) { 
fmt.Printf ("bs len=%d cap=%d %v\n",s, len(x), cap (x), x) 


} 





3.slice 的 零 值 
slice 的 零 值 是 nil， 一 个 nil 的 slice 的 长 度 和 容量 是 0。 


4. 如 何 向 slice 添 加 元 素 








向 slice 添 加 元 素 是 一 种 常见 的 操作 ， 在 下 面 的 代码 中 ，Go 提 供 了 一 个 内 建 函 数 apPpend， 使 用 该 函数 可 以 向 slice 推 入 一 个 或 多 个 元 素 ， 并 返回 新 的 slice : 




















func append(s []T, vs http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/17282/OEBPS/Text/...T) []T 








append 的 第 一 个 参数 s 是 一 个 类 型 为 T 的 数组 ， 其 余 类 型 为 T 的 值 将 会 添加 到 slice。append 的 结果 是 一 个 包含 原 slice 所 有 元 素 加 上 新 添加 元 素 的 slice。 





如 果 s 的 底层 数组 太 小 ， 不 能 容纳 所 有 值 时 ， 会 分 配 一 个 更 大 的 数组 。 返 回 的 slice 会 指向 这 个 新 分 配 的 数组 。 数 组 不 能 改变 大 小 ， 它 仅 是 一 个 瓶子 ， 如 果 瓶 子 小 了 ， 可 以 换 一 个 大 的 ， 要 变换 的 只 是 指向 
数组 的 指针 ， 不 变 的 是 数组 元 素 的 指针 。 


17.3.5 range 


for 循 环 的 range 格 式 可 以 对 slice 或 map 进 行 迭 代 循环 。 以 下 是 相应 的 练习 代码 : 





package main 
import "fmt" 


var pow = [Jint{1, 2, 4, 8, 16, 32, 64, 128} 


func main() { 
for i, v := range pow { 
fmt .Printf ("2**%d = %d\n", i, v) 
} 











在 如 下 代码 中 ， 可 以 通过 使 用 空白 忽略 符 “_” 来 忽略 序号 和 值 : 














for _, value := range pow { 
fmt. Printf("%d\n", value) 
} 


17.3.6 map 






































map 会 将 键 映射 到 值 。map 在 使 用 之 前 ， 必 须 用 make 而 不 是 new 来 创建 。 值 为 nil 的 map 是 空 的 ， 在 make 之 前 不 能 赋值 。 实 例 化 数组 、 字 典 都 是 使 用 make， 实 例 化 结构 体 使 用 的 是 new。 




















下 面 是 本 小 节 的 练习 代码 ， 其 中 m 即 map 类 型 : 





Package main 

import "fmt" 

type Vertex struct { 
Lat, Long float64 

} 


var m map[string] Vertex 
func main() { 
m = make (map[string] Vertex) 
m["Bell Labs"] = Vertex{ 
40.68433, -74.39967, 


} 
fmt.Println(m["Bell Labs"]) 








在 以 下 代码 中 ， 声 明 map 的 文法 跟 结 构 体 声明 文法 相似 ， 不 过 必须 要 有 键 名 。 其 中 ，Bell Labs、Google 即 是 键 名 : 





var m = map[string] Vertex{ 
"Bell Labs": Vertex{ 
40.68433, -74.39967, 


, 
"Google": Vertex{ 

37.42202, -122.08408, 
ty 


关于 如 何 修改 map 

“使 用 “mkey]=elem” 可 在 map 类 型 m 中 插入 或 修改 一 个 元 素 。 
“使 用 “elem=mlkey]” 可 获得 元 素 。 

“使 用 “delete (m, key) ”可 删除 元 素 。 


在 下 面 的 代码 中 ， 可 通过 双 赋 值 检测 某 个 键 的 存在 。 如 果 ok 为 true， 则 说 明 存在 键 值 。 


elem, ok = m[key] 











如 果 key 在 m 中 ， 则 ok 为 true; 否则 ，ok 为 false， 并 且 elem 是 map 元 素 类 型 的 零 值 。 同 样 ， 当 从 map 中 读 取 某 个 不 存在 的 键 时 ， 结 果 就 是 map 元 素 类 型 的 零 值 。 


以 下 是 本 小 节 的 练习 代码 : 





package main 
import "fmt" 


func main() 


m := make (map[string] int) 
m[{"Answer"] = 42 
fmt.Println("The value:", m["Answer"] ) 


m{"Answer"] = 48 
fmt.Println ("The value:", m["Answer"]) 


delete (m, "Answer") 
fmt.Println("The value:", m["Answer"] ) 


v, ok := m[{"Answer"] 
fmt.Println("The value:", v, "Present?", ok) 





173.7 We 


函数 也 是 值 ， 也 可 以 在 函数 中 声明 和 传递 。 在 下 面 的 代码 中 ，hypot 就 是 一 个 函数 变量 : 





Package main 
import ( 


func main() { 
hypot := func(x, y float64) float64 { 
return math.Sqrt (x*x + y*y) 
} 


fmt .Println (hypot (3, 4)) 
} 





其 中 ，hypot 就 是 一 个 声明 为 值 的 函数 。 


















































Go 函数 可 以 是 闭 包 的 。 闭 包 是 一 个 函数 值 ， 它 来 自 于 对 函数 体外 部 的 变量 引用 。 函 数 可 以 对 这 个 引用 值 进行 访问 和 赋值 。 换 句 话说 ， 这 个 函数 被 “ 绑 定 ”在 这 个 变量 上 。 

















在 下 面 的 代码 中 ， 函 数 adder 返 回 了 一 个 闭 包 ， 每 个 闭 包 都 被 绑 定 到 了 其 各 自 的 Sum 变量 上 。 函 数 adder 返 回 的 不 仅 是 一 个 做 加 法 运算 的 函数 ， 还 包括 上 下 文 环境 中 的 变量 sum， 它 们 作为 一 个 整体 被 称 
为 函数 的 闭 包 。 











package main 
import "fmt" 


func adder() func(int) int { 
sum := 0 
return func(x int) int { 
sum += x 
return sum 
} 
i 


func main() { 
pos, neg := adder(), adder() 
for i:= 0; i < 10; itt { 
fmt .Println( 
pos (i), 
neg(-2*i), 
) 





174 ”方法 和 接口 








本 节 将 学 习 如 何 定义 方法 和 接口 。 方 法 和 接口 用 于 定义 对 象 的 行为 。 























174.1 方法 


Go 没有 类 ， 只 能 在 结构 体 类 型 上 定义 方法 。 方 法 接收 者 出 现在 func 关 键 字 和 方法 名 之 间 的 参数 中 ， 示 例 代码 如 下 : 


func (v *Vertex) Abs() float64 { 
return math.Sqrt (v.X*v.X + v.Y*v.Y) 
} 








其 中 ，“v*Vertex” 中 的 v 即 为 方法 接收 者 ，*Vertex 是 接收 者 的 类 型 。 








可 以 对 包 中 的 任意 类 型 定义 任意 方法 ， 而 不 仅仅 只 是 针对 结构 体 。 但 是 不 能 对 来 自 其 他 包 的 类 型 或 基础 类 型 定义 方法 。 在 如 下 代码 中 ， 函 数 “Abs” 是 定义 在 MyFloat 上 的 方法 。MyFloat 是 float64 的 
别名 类 型 。 





type MyFloat float64 


func (f MyFloat) Abs() float64 { 
if f<0{ 
return float64 (-f) 
} 
return floaté4 (f) 











上 面 两 段 代码 中 定义 的 Abs 方 法 ， 一 个 是 在 *Vertex 指 针 类 型 上 ， 另 一 个 是 在 MyFloat 值 类 型 之 上 。 有 如 下 两 个 原因 需要 使 用 指针 类 型 的 接收 者 。 











“ 避免 在 每 个 方法 调用 中 复制 值 。 
“ 方法 可 以 修改 接收 者 指向 的 值 。 


在 下 面 的 代码 里 ， 在 方法 Scale 中 ， 接 收 者 v 的 成 员 变 量 X、Y 将 被 改变 。 








func (v *Vert ale(f float64) { 


ex) Sc 
xe f 
> 





17.4.2 接口 









































接口 类 型 是 由 一 组 方法 定义 的 集合 。 接 口 类 型 的 值 可 以 存放 实现 这 些 方法 的 任何 值 。 在 如 下 代码 中 ， 类 型 MyFloat、Vertex 均 实现 了 Abser 接 口 。 在 Go 语言 中 ， 一 个 类 型 实现 一 个 接口 时 不 需 


明 ， 实现 本 身 即 是 声明 。 





type Abser interface { 
Abs() float64 


} 
func (f MyFloat) Abs() float64 { 
iff<0{ 
return float64 (-f) 


} 
return floaté4 (f) 
$ 
func (v Vertex) Abs() float64 { 


return math.Sqrt (v.X*v.X + v.Y*v.Y) 
} 





关于 Stringers 接 口 





如 下 代码 所 示 的 是 普遍 存在 的 在 fmt 包 中 定义 的 Stringer 接 口 : 





type Stringer interface { 
String() string 
} 








Stringer 是 一 个 可 以 用 字符 串 来 描述 自己 的 类 型 。fmt 包 使 用 这 个 接口 的 String 方 法 来 进行 输出 。 在 如 下 代码 中 ，fmt.Println 方 法 在 无 形 中 调用 了 Person 的 String 方 法 : 





type Person struct { 
Name string 
Age int 


func (p Person) String() string { 

return fmt.Sprintf("%v (%v years)", p.Name, p.Age) 
} 
func main() { 

a := Person{"Arthur Dent", 42} 

fmt.Println (a) 





174.3 ”错误 








Go 程序 使 用 error 值 来 表示 错误 状态 。 在 如 下 代码 中 ， 与 fmt.Stringer 类 似 ，error 类 型 也 是 一 个 内 建 接口 。 在 使 
































fmt 包 打印 error 对 象 时 ，Go 会 调用 error 对 象 的 Error 方 法 获取 打印 信息 : 














type error interface { 
Error() string 
} 








通常 函数 会 返回 一 个 error 值 ， 调 用 它 的 代码 应 当先 判断 这 个 错误 是 否 等 于 nil， 然 后 进行 错误 处 理 。 在 如 下 代码 中 ，error 为 nil 时 表示 成 功 ， 反 之 则 表示 错误 : 





if i, err := strconv.Atoi("42"); err != nil { 
fmt.Printf ("convert err: %v\n", err) 
return 





